标签：
(1)XMLHttpRequest对象的创建(XHR)
1 var request; 2 if(window.XMLHttpRequest){ 3 request= new XMLHttpRequest();//ie7+,ff,chrome,opera,safari. 4 }else{ 5 request = new ActiveXObject("Microsoft.XMLHTTP");//ie5 6 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")
1 <script> 2 document.getElementById("search").onclick = function() { 3 var request = new XMLHttpRequest(); 4 request.open("GET", "server.php?number=" + document.getElementById("keyword").value); 5 request.send(); 6 request.onreadystatechange = function() { 7 if (request.readyState===4) { 8 if (request.status===200) { 9 document.getElementById("searchResult").innerHTML = request.responseText; 10 } else { 11 alert("发生错误：" + request.status); 12 } 13 } 14 } 15 } 16 17 document.getElementById("save").onclick = function() { 18 var request = new XMLHttpRequest(); 19 request.open("POST", "server.php"); 20 var data = "name=" + document.getElementById("staffName").value 21 + "&number=" + document.getElementById("staffNumber").value 22 + "&sex=" + document.getElementById("staffSex").value 23 + "&job=" + document.getElementById("staffJob").value; 24 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 25 request.send(data); 26 request.onreadystatechange = function() { 27 if (request.readyState===4) { 28 if (request.status===200) { 29 document.getElementById("createResult").innerHTML = request.responseText; 30 } else { 31 alert("发生错误：" + request.status); 32 } 33 } 34 } 35 } 36 </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"
1 $.ajax({ 2 type: "GET", 3 url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(), 4 dataType: "jsonp", 5 jsonp: "callback", 6 success: function(data) { 7 if (data.success) { 8 $("#searchResult").html(data.msg); 9 } else { 10 $("#searchResult").html("出现错误：" + data.msg); 11 } 12 }, 13 error: function(jqXHR){ 14 alert("发生错误：" + jqXHR.status); 15 }, 16 });
后端修改
callback的值拼接在这里({"":""})
3.HTML5提供的XHR2(IE10以上支持)
只需要在服务端做如下修改
header("Access-Control-Allow-Origin:*")
*:所有域名
header("Access-Control-Allow-Methods:POST,GET")
可以允许POST,GET
标签：
原文地址：http://www.cnblogs.com/chenjinjian/p/4714406.html
