Ajax全接触

(1)XMLHttpRequest对象的创建(XHR)

var request;
if(window.XMLHttpRequest){
    request= new XMLHttpRequest();//ie7+,ff,chrome,opera,safari.
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP");//ie5 6
}

(2)XHR发送请求

open（method，url，async）

method="get","post","Get","Post",一般大写

url=绝对地址,相对地址

async=true,异步

设置http请求头信息

发送表单信息
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded")

<script>
document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("searchResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}

document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "server.php");
    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("createResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}
</script>

 (3)XHR 取得响应

通过onreadystatechange来监听

responseText,文本内容

responseXml,XML内容

status statusText:
getAllResponseHeader();
getResponseHeader("xx");

readystate
0 没有open
1 已建立连接
2 接受处理
3 处理
4 完成

(4)JSON基本概念

1.JavaScript对象表示法(JavaScript Object Notation)

2.解析json

eval('('+jsonString+')'),不校验代码json格式,可以执行JS方法

JSON.parse,校验json格式,不执行JS方法

(5)跨域

http://     www   .    abc.com   :   80   /    scripts/jquery.js

协议        子域名         主域名       端口号      请求的资源地址

上面的协议,子域名,主域名,端口号,任意一个不相同,都算不同的域

1.代理

2.JSONP,解决Get请求的跨域

前端修改,jsonp:"callback"

$.ajax({ 
    type: "GET",     
    url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(),
    dataType: "jsonp",
    jsonp: "callback",
    success: function(data) {
        if (data.success) {
            $("#searchResult").html(data.msg);
        } else {
            $("#searchResult").html("出现错误：" + data.msg);
        }  
    },
    error: function(jqXHR){     
       alert("发生错误：" + jqXHR.status);  
    },     
});

后端修改

callback的值拼接在这里({"":""})

3.HTML5提供的XHR2(IE10以上支持)

只需要在服务端做如下修改

header("Access-Control-Allow-Origin:*")

*:所有域名

header("Access-Control-Allow-Methods:POST,GET")

可以允许POST,GET