1.XMLHttpRequest对象
var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5 }
2.HTTP请求和响应
HTTP请求完整过程：
- 建立TCP连接
- 浏览器向Web服务器发送请求命令
- 浏览器发送请求头信息
- Web服务器应答
- Web服务器发送应答头信息
- Web服务器向浏览器发送数据
- Web服务器关闭TCP连接
HTTP请求的组成：
请求的方法或动作（GET或POST）、请求的URL、请求头（客户端环境和验证信息等）、请求体（请求正文）
HTTP响应的组成：
状态码（数字和文字组成）、响应头（服务器类型、日期时间、内容类型和长度等）、响应体
状态码（首字母定义了类型）：
1xx:信息类、2xx:成功（200 OK）、3xx:重定向(304)、4xx客户端错误（404 NOT FOUND）、5xx:服务器错误（500）
XMLHttpRequest发送请求：
- open(method,url,async) //async默认值是true，即异步传输
- send(string)
xhr.open("GET","search.php",true);
xhr.send();
xhr.open("POST","create.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=小明&sex=男");
XMLHttpRequest取得响应：
- responseText属性：获取字符串形式的响应数据
- responseXML属性：获取XML形式的响应数据
- status属性和statusHeader()：HTTP状态码
- getAllResponseHeader()：获取所有的响应报头
- getResponseHeader()：查询响应中的某个字段的值
- readyState属性：0：请求未初始化、1：服务器连接已建立，open已调用、2：请求已接收，接收到头信息、3：请求处理中，接收到响应主体、4：请求已完成
xhr.onreadystatechange = function(){ if( xhr.readyState==4&&xhr.status===200 ){ //xhr.requestText } }
实例：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Demo</title> <style> body, input, select, button, h1 { font-size: 28px; line-height:1.7; } </style> </head> <body> <h1>员工查询</h1> <label>请输入员工编号：</label> <input type="text" id="keyword" /> <button id="search">查询</button> <p id="searchResult"></p> <h1>员工新建</h1> <label>请输入员工姓名：</label> <input type="text" id="staffName" /><br> <label>请输入员工编号：</label> <input type="text" id="staffNumber" /><br> <label>请选择员工性别：</label> <select id="staffSex"> <option>女</option> <option>男</option> </select><br> <label>请输入员工职位：</label> <input type="text" id="staffJob" /><br> <button id="save">保存</button> <p id="createResult"></p> <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> </body> </html>
3.JSON
数据格式：“名称”：“值对”
数值得类型：数字(整型和浮点数)、字符串（双引号）、逻辑值（true或false）、数组（[]）、对象({})、null
JSON解析：
- eval 危险，特别是执行第三方json数据时尽可能使用JSON.parse()方法
- JSON.parse 可捕捉JSON中的语法错误
var jsondata = '{"staff":[{"name":"一","age":"60"},{"name":"二","age":"40"},{"name":"三","age":"30"}]}'; var jsonobj = eval('('+jsondata+')'); var jsonobj = JSON.parse(jsondata); //jsonobj.staff[0].name
检查json语法错误的网站：jsonlint.com
4.jquery实现ajax
jQuery.ajax([settings])
- type:类型，"POST"、"GET"
- url:发送请求的地址
- data:一个对象，连同请求发送到服务器的数据
- dataType:预期服务器返回的数据类型，例如"json"、"jsonp"，可不指定
- success:请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串
- error:请求失败时调用，传入XMLHttpRequest对象
$(document).ready(function(){ $("#search").click(function(){ $.ajax({ type: "GET", url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=" + $("#keyword").val(), dataType: "json", success: function(data) { if (data.success) { $("#searchResult").html(data.msg); } else { $("#searchResult").html("出现错误：" + data.msg); } }, error: function(jqXHR){ alert("发生错误：" + jqXHR.status); }, }); }); $("#save").click(function(){ $.ajax({ type: "POST", url: "serverjson.php", data: { name: $("#staffName").val(), number: $("#staffNumber").val(), sex: $("#staffSex").val(), job: $("#staffJob").val() }, dataType: "json", success: function(data){ if (data.success) { $("#createResult").html(data.msg); } else { $("#createResult").html("出现错误：" + data.msg); } }, error: function(jqXHR){ alert("发生错误：" + jqXHR.status); }, }); }); });
5.跨域
一个域名地址组成： http:// www . abc.com : 8080 / scripts/jquery.js
协议 子域名 主域名 端口号 请求资源地址
当协议、子域名、主域名、端口号中任意一个不相同时，都算不同域。不同域之间相互请求资源就叫跨域。
JavaScript出于安全的考虑，不允许跨域调用其他页面的对象，即受JavaScript的同源策略的限制。
处理跨域的方法：
- 代理：通过在同域名的web服务器端创建一个代理。比如在北京的服务器后台（www.beijing.com/proxy-shanghaiservice.php）来调用上海服务器（www.shanghai.com/seivice.php）的服务，然后再把响应结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。
- JSONP：Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）。JSONP非正式传输协议，允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
<script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){ alert('你查询的航班结果是：票价 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码） var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签，设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head，此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); </script>//服务器很聪明，这个叫做flightResult.aspx的页面生成了一段这样的代码提供给jsonp.html（服务端的实现这里就不演示了，与你选用的语言无关，说到底就是拼接字符串）： flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });
jQuery实现<script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } }); }) </script>
- XHR2：HTML5提供的XMLHttpRequest Level2已实现了跨域访问以及一些其他新功能。(CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求) 在服务端做一些小小的改造：
-
- header('Access-Control-Allow-Origin:*');
- header('Access-Control-Allow-Methods:POST,GET');
设置的header为“*”，任意一个请求过来之后服务端我们都可以进行处理&响应。
cors在移动终端支持的不错，可以考虑在移动端全面尝试；PC上有不兼容和没有完美支持，所以小心踩坑。jsonp是get形式，承载的信息量有限，所以信息量较大时cors是不二选择。
参考：慕课网-Ajax全接触http://www.imooc.com/learn/250
AJAX POST&跨域 解决方案 - CORS http://www.cnblogs.com/Darren_code/p/cors.html
说说JSON和JSONP,也许你会豁然开朗 http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html