ajax总结

Ajax

1.定义

指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

2.Ajax工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

3.Ajax的使用

3.1XMLHttpRequest 的方法：

（1）open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法（GET或POST），第二个参数规定服务器端脚本的URL，第三个参数默认是true规定应当对请求进行异步地处理，因此省略。

xhr.open(‘get’,URL,true)

（2）send() 方法

send() 方法将请求送往服务器 。

3.2XMLHttpRequest 的3个常用属性：

（1）onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。

xhr.onreadystatechange = function(){
            if(xhr.status == 200&&xhr.readyState==4){
                console.log("成功获取数据");
            }
        }

（2）readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。

readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用open() 之前）
1	请求已提出（调用send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（部分数据可用，但服务器未响应完成）
4	请求已完成（可以访问服务器并使用它）

（3）通过 response 属性来取回由服务器返回的数据。

xhr.onreadystatechange = function(){
            if(xhr.status == 200&&xhr.readyState==4){
                console.log("成功获取数据");
                //5.处理数据
                var res = xhr.response;
                var h1 = document.createElement('h1')
                h1.innerHTML =res
                document.body.appendChild(m)
            }
        }

3.3 GET和POST的区别

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 。

3.4 Ajax的使用

（1）创建XMLHttpRequest核心对象；

（2）向服务器发送请求

（3）服务器响应处理

4.Ajax的封装

 function getAjax(httpUrl,data,callbackFn){
            //1.创建xhr对象
            var xhr = new XMLHttpRequest()
            //2.设置请求路径
            xhr.open("GET",httpUrl+parseData(data))
            //3.发送数据
            xhr.send()
            //4.监听后台是否返回数据
            xhr.onreadystatechange  = function(){
                if(xhr.status ==200&&xhr.readySdate==4){
                    //5.处理数据
                    callbackFn(xhr)
                }
            }
            function parseData(data){
                var str = "?"
                for (var key in data) {
                    str = str+key+"="+data[key]+"&"
                }
                return str.substr(0,str.length-1)
            }
        }