对AJAX的浅薄的理解

AJAX（Asynchronous Javascript and XML）异步的javascript和XML
首先，它不是一种编程语言，是可以在不加载整个页面的情况下局部更新的一种技术
核心是XMLHttpRequest
通过XMLHttpRequest和web浏览器进行数据的交互和异步，然后通过javascript操作dom，实现动态的局部刷新
1、创建一个XMLHttpRequest对象
var request;
//做兼容型处理，主要处理ie6以下
if(window.XMLHttpRequest){
request=new XMLHttpRequest()
}
else{
request=new ActiveObject(“Microsoft XMLHTTP”)
}
2、XMLHttpRequest发送请求
请求的方式有两种：GET POST
前者可以用来查询，后者可以用来修改添加数据到后台等
open（method,url,async）发送请求的方法，请求的地址，异步
send(String)
3、XMLHttpRequest获取响应
（1）reponseText 获得响应的数据
（2）status 获取http状态码
常见的状态码
1** 接收到请求，正在处理
2** 代表成功
3** 重定向
4** 客户端出现错误
5** 服务器端出现错误
（3）readyState
0:表示请求初始化
1：服务器建立连接
2：请求已经接受
3：正在处理中
4：响应完成
4、页面监听
request.onreadyStatechange=function(){
if(request.readyState=4&&request.status=200){
//做你想做的事情
}
}
5、客户端的实现
通过javascript操作dom，实现动态的局部刷新

采用jquery实现

//GET请求
        $(document).ready(function(){
            $("#search").click(function(){
                $.ajax({
                    type:"GET",
                    url:"sever.php?number="+$("#input").val(),
                    dataType:"json",
                    success:function(data){
                        if(data.success){
                            //做你想做的事情
                            $("#add1").html(data.msg)
                        }
                        else{
                            $("#add1").html("出现错误"+data.msg)
                        }
                    },
                    error:function(jqXHR){alert("出现错误"+jqXHR.status)}
                })
            })
        })

//post请求
        $(document).ready(function(){
            $("#search").click(function(){
                $.ajax({
                    type:"POST",
                    url:"sever.php",
                    dataType:"json",
                    data:{
                        //以键值对的方式写上你要向服务器传输的参数的值
                        name:$("input1").val(),
                        age:$("input2").val(),
                        class:$("input3").val()
                    },
                    success:function(data){
                        if(data.success){
                            //做你想做的事情
                            $("#add1").html(data.msg)
                        }
                        else{
                            $("#add1").html("出现错误"+data.msg)
                        }
                    },
                    error:function(jqXHR){alert("出现错误"+jqXHR.status)}
                })
            })
        })

json是一种数据格式，与js有着相似的书写格式
例如：
{
“name”:“zhangsan”,
“age”:18;
‘hasgrilfriend":false;
“hascar”：null
}
将对象转为json格式：JSON.stringify(obj)
将json转为对象格式：JSON.parse(JSON.stringify(obj))//小提示，这种方法可以实现对象的深拷贝

promise实现

        var getJson=function(url){
            return new Promise(function(resolve,reject){
                var request=new XMLHttpRequest()
                request.open("GET",url)
                request.onreadystatechange=handle
                request.responseType="json"
                request.setRequestHeader("Accept","application/json")
                request.send()
                

                function handle(){
                    if(this.readyState==4&&this.status==200){
                        resolve(this.response)
                    }
                    else{
                        reject(new Error(this.status))
                    }
                }
            })
        }
        getJson("/posts,json").then(function(json){
            console.log(json)
        },function(){
            console.log("出错了",error)
        })