Ajax原理及JQuery封装的使用

1.什么是Ajax

• 本质：是在HTTP协议的基础上通过js的XMLHttpRequest对象与服务器进行通信。它可以用异步的方式处理程序。

• 作用：与表单提交的方式相比,它可以在页面不刷新的情况下请求服务器，局部更新页面的数据。

2.实现步骤

 ① 创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

 ② 设置请求报文

   1. 设置请求行

    参数1为请求方式,参数2为请求地址

 //get方式：
 xhr.open("get", "01.php?name=zs&age=18");//需要将发送的数据拼接在地址后面
 //post方式：
 xhr.open("post", "02.php");//不需要拼接数据

   2. 设置请求头

//get方式: 
xhr.setReqeustHeader('content-type','text/html');//请求头默认为get方式,因此get方式可以省略请求头
//post方式：
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

   3. 设置请求主体

//get方式:
xhr.send(null);//get方式的请求主体为空,因为已经将数据拼接在url地址后了
//post方式:
xhr.send("name=zs&age=18");//将请求时发送给后台的数据放在请求主体中

 ③ 获取响应

  readyState：记录了XMLHttpRequest对象的当前状态，响应完成时 readyState = 4，响应成功的状态码 status = 200。

//给xhr注册一个onreadystatechange事件，当xhr的状态发生改变时，会触发这个事件
 xhr.onreadystatechange = function () {
     if (xhr.readyState == 4 && xhr.status == 200 ) {
         //1. 获取状态行：xhr.status
         console.log("状态行:"+xhr.status);
         //2. 获取响应头
         console.log("所有的响应头:"+xhr.getAllResponseHeaders());
         console.log("指定响应头:"+xhr.getResponseHeader("content-type"));
         //3. 获取响应主体(服务器返回的数据在响应主体中)
         var r = xhr.responseText;
         console.log(r);
     }
 }        

3. jQuery封装的Ajax使用

//使用之前先引入jquery文件
<script src="jquery-1.12.4.min.js"></script>
$.ajax({
    type: 'get' , //请求方式 get/post,默认get
    url: '01.php',  //请求地址
    data: {name: 'zs', age: 18}, //发送请求时传递的数据(以对象的形式传递,ajax方法内部会转换为name=zs&age=18)
    timeout: 2000, //设置超时时间(单位：毫秒) ，超出指定时间，请求自动终止 
    dataType: 'text', // 可设置为text/xml/json ,指定浏览器希望接受的数据类型,当将dataType设置为json后，$.ajax方法内部会自动调用JSON.parse()对数据进行转换 
    beforeSend: function () {
       //请求发送之前执行的代码(准备工作,如数据验证等)       
    },
    success: function (info) { 
       //请求成功时执行的代码(渲染数据在这里执行)
        console.log(info);
    },
    error: function () {
      //请求出错时执行的代码(提示错误信息)
      console.log('出错了！');
    },
    complete: function () {
      //请求完成时执行(用于处理收尾动作,样式复位等)
    }
})

本文属于个人整理，如有不足之处，望指正。

注：转载请引用