原生ajax代码实例讲解

原生ajax

post:

  
  var url = './123.json';//此处填写路径
  
  var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest对象
  
  xhr.open("POST", url, true);//请求方式，请求路径,是否异步
  
  //如果是post请求，下面一行一定是设置请求头(固定写法)
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  
  //发送数据，只能发送字符串，想发送类似对象格式的数据，用 '&' 连接
  xhr.send('sql='+sql.value+ '&' + 'sql='+sql.value+10);
  
  //如果是同步的只能写在send后面，如果是异步的此函数可以写在上面
  xhr.onreadystatechange = function () {
     // xhr.readyState 有个5个状态 0 1 2 3 4 5
     // xhr.readyState == 0  请求未初始化
     // xhr.readyState == 1  服务器连接已建立
     // xhr.readyState == 2  请求已接收
     // xhr.readyState == 3  请求处理中
     // xhr.readyState == 4  请求已完成，且响应已就绪
     if (xhr.readyState == 4) {
       if (xhr.status == 200) {
         alert('发送成功');
         var data = xhr.response;
       } else {
         if (xhr.status == 404) {
           alert("404");
         }
       }
     }
  };

get:

  
  //此处填写路径,get请求的参数可以用字符串拼接，如:
  var url = './123.jsonname=Lisi&gender=man&age'++ Math.random();
  
  var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest对象
  
  xhr.open("GET",url,true);
  
  xhr.send();
  
  //如果是同步的只能写在send后面，如果是异步的此函数可以写在上面
  xhr.onreadystatechange = function () {
     if (xhr.readyState == 4) {// xhr.readyState == 4 时才是发送成
       if (xhr.status == 200) {
         alert('发送成功');
         var data = xhr.response;
       } else {
         if (xhr.status == 404) {
           alert("404");
         }
       }
     }
  };