ajax解析

一、 ajax

1.什么是ajax

ajax：是Asynchronous JavaScript And XML的缩，表示的是异步的JavaScript与XML，ajax可以实现网页的动态更新，而且是在不刷新整个页面的情况下，对部分内容进行更新。

2.同步与异步区别

同步：当用户发送请求时，等待服务器响应，在这期间客户端其他代码都无法正常运行。
异步：当用户发送请求时，等待服务器响应，在这期间客户端其他代码都可以正常运行。

二、实现ajax的五个步骤

1.创建请求体

 //这里可以进行一下判断看用户是否用IE或者Netscape浏览器
var xhr;  //定义一个变量
Create();  //调用创建对象的方法 
function Create(){                                                 
    if(window.ActiveXObject) {//判断是否是IE浏览器
     xhr = new ActiveXObject("Microsoft.XMLHTTP");//创建IE的XMLHttpRequest对象
    }else if(window.XMLHttpRequest){//判断是否是Netscape等其它浏览器
     xhr = new XMLHttpRequest();//创建其他浏览器上的XMLHttpRequest对象
    }
  }

2.调用open方法，设置请求方式和路径

在open方法中有五个参数
第一个参数是请求方式
第二个是请求路径
第三个表示是否异步 默认为true异步
第四个是用户名
第五个是密码 如果需要服务器验证则需要这两个参数

 xhr.open("post", "data.php");
// xhr.open("get", "data.php?name=rose&age=99");//数据传递

3.设置请求头，如果是get方法则可以省略

  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

4.监听响应完成事件

   xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.responseText);
            }
    }

请求变化有五个状态
1.初始化状态。XMLHttpRequest对象的readyState属性值为0。
2.初始化状态。XMLHttpRequest对象的readyState属性值为1。
3.发送数据状态。XMLHttpRequest对象的readyState属性值为2。
4.接收数据状态。XMLHttpRequest对象的readyState属性值为3。
5.完成状态。XMLHttpRequest对象的readyState属性值为4。
此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。

如果响应完成，就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。

5.发送请求

 xhr.send("name=rose&age=99");//如果是get请求，在路径后进行数据传递

三.封装ajax

    function ajax(params) {
           if(window.ActiveXObject) {
             xhr = new ActiveXObject("Microsoft.XMLHTTP");
           }else if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
           }
            // 判断type是get还是post  
            if(params.type == "get") {
                params.url += "?" + params.data;
            }
            xhr.open(params.type, params.url);
            // 判断是否为post  如果是post请求 传参使用send方法传参 并且加请求头
            if(params.type  == "get") {
                xhr.send();
            } else {
                // 传参需要设置请求头
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                // 发送请求
                xhr.send(params.data);
            }


            // 不传参数时  get和post请求一样
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    // 先拿到响应体
                    var res = xhr.responseText;
                    if(params.dataType == "json") {
                        res = JSON.parse(res);
                    } else if(params.dataType == "XML") {
                        // 对XML数据进行转换
                        // 创建转换对象
                        var parser = new DOMParser();
                        res = parser.parseFromString(res, "text/xml");
                    } else {
                        res = xhr.responseText;
                    }
                    params.success(res);

                }
            }

       
        }