在很久很久以前，使用网页会碰到一件非常令人痛心的事： 甜柿酱：啦啦啦，终于填写完毕啦，提交提交！ 某网页：[ 认真脸 ] 每当我提交或更新内容，都要重新载入页面哦~ 服务器：等等，有个字段填错啦！ 某网页：[ 无辜脸 ]，不好意思，只能给你一份新表单，重头再来哦~
直到1998年，一个叫Ajax的孩子出现了！ 到了2005年，它成功地为大众所接受，火遍了全世界！
AJAX Asynchronous JS and XML （异步的JS和XML） Ajax是一种技术——无需重新加载整个网页的情况下更新部分网页。 这种技术是通过XMLHttpRequest（下文简称XHR）对象实现的。
本篇内容导航 要实现一次局部的更新，以下方面需要我们考虑：
网页与服务器是如何沟通的（HTTP简介） 用户提交网页，建立一个XHR对象。（如何定义一个XHR对象） 向服务端发出请求（XHR发送请求） 服务端的工作（服务端PHP简介） 从服务端获取信息（XHR取得响应） 拿什么来装我们的数据（JSON数据格式） 换种方式实现（JQuery与Ajax） 想要访问别人家的服务器数据（跨域简介）
PS：本文是柿子观看慕课网视频后的摘录总结，更加详细的内容请见姜维老师的视频Ajax全接触，该页面下可下载老师的源代码。
【网页与服务器是如何沟通的】
HTTP 计算机通过网络进行通信的规则，是一种无状态的协议，即不建立持久的连接。
完整的HTTP请求，通常有7个步骤： 1、建立TCP连接 2、Web浏览器向Web服务器发送请求命令 3、Web浏览器发送请求头信息 4、Web服务器应答 5、Web服务器发送应答头信息 6、Web服务器向浏览器发送数据 7、Web服务器关闭TCP连接
HTTP请求，有4部分： 1、HTTP请求的方法或动作：GET or POST 2、请求的URL 3、请求头，包含客户端环境信息，身份验证信息 4、请求体，正文，可以包含客户提交的查询字符串信息，表单信息等等。
GET请求（安全） 一般用于信息获取 使用URL传递参数，明文。 对发送信息的数量也有限制，一般在2000个字符
POST请求 一般用于修改服务器上的资源 对发送信息的数量无限制
HTTP响应，有3个部分 1、数字和文字组成的状态码，显示请求成功还是失败 2、响应头，包含服务器类型、日期时间、内容类型和长度等 3、响应体，即响应正文。
【用户提交网页，建立一个XHR对象。】
以下JS代码兼容IE5、6，其实现在已不用再考虑这两个版本，除非有特殊要求
var request; if(window.XMLHttpRequest) request = new XMLHttpRequest(); else request = new ActiveXObject("Microsoft.XMLHTTP");//IE6、IE5【向服务端发出请求】
首先，调用HTTP请求： open(method,url,async) 第一个参数get or post 第二个参数地址 第三个参数，同步or异步，默认true（异步），所以可以不填
其次，发送请求： send(string) 如果是get，没有参数（参数在url中了），如果是post，则必须填写参数
代码栗子
request.open("GET","get.php?number=1&sex=女",true); request.send(); request.open("POST","post.php",true); request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send("name=天使酱&sex=女");对于get，数据在URL中，格式是：地址？参数1=参数值1&参数2=参数值2 对于post，数据由send发出，格式是：参数1=参数值1&参数2=参数值2
注意：setRH那句是为了设置信息头. CONTENT-TYPE:application/x-www-form-urlencoded含义是表示客户端提交给服务器文本内容的编码方式是URL编码。
【服务端的工作】
（前端不必掌握，了解即可，若要尝试阅读老师的源代码，建议学习一下基础的PHP语法知识。） php是创建动态交互性站点的服务器脚本语言。 在服务端脚本中，将对浏览器发送的信息进行处理（查询，修改之类），将结果返回给浏览器
//设置页面内容是什么格式，以什么来进行编码 //header("Content-Type: text/plain;charset=utf-8"); //header("Content-Type: application/json;charset=utf-8"); //header("Content-Type: text/xml;charset=utf-8"); //header("Content-Type: text/html;charset=utf-8"); //header("Content-Type: application/javascript;charset=utf-8"); if ($_SERVER["REQUEST_METHOD"] == "GET") { //如果是get请求，执行操作： } elseif ($_SERVER["REQUEST_METHOD"] == "POST"){ //如果是post请求，执行操作： } //isset检测变量是否设置；empty判断值为否为空 //超全局变量 $_GET 和 $_POST 用于收集表单数据 if (!isset($_GET["number"]) || empty($_GET["number"])) { //接收到的信息中，是否有number字段，number字段是否有值 } //将xxx发回给请求的浏览器 echo xxx;PS：chrome浏览器审核，Network标签下，可以看到发送的请求头信息，以及服务器应答信息。 PS：chrome插件postman可以测试请求信息，模拟请求信息（fiddler也可以），可以在没有客户端的情况下做测试。
【从服务端获取信息】
首先，要监听服务器是否有将信息发回来，通过监听这个属性的变化来判断 readyState属性 0：请求未初始化，open还没有调用 1：服务器连接已建立，open已经调用了 2：请求已接收，也就是接收到头信息了 3：请求处理中，也就是接收到响应主体了 4：请求已完成，且响应已就绪，也就是响应完成了
代码如下：
request.onreadystatechange = function(){ if(request.readyState === 4 && request.status === 200 ){//status是HTTP状态码，200表示用户请求被正确接收，常见的还有404等等。 //做一些事情 request.responseText …… } }其次获取内容进行操作，通过以下属性： responseText：获取字符串形式的响应数据 responseXML：获取XML形式的响应数据（少用，多JSON） status和statusText：以数字和文本形式返回HTTP状态码 getAllResponseHeader()：获取所有的响应报头。 getResponseHeader(参数)：查询响应中某个字段的值
【拿什么来装我们的数据】
JSON 是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同事也易于机器解析和生成。JSON是独立于语言的，只需要按照JSON的规则就可以解析JSON。
与xml比较： 长度小，读写快，可用JS內建的方法直接进行解析，转换成JS对象很方便
语法规则： “名称”:值， 值的类型可以是：数字——整数或浮点、字符串（双引号中）、逻辑值、数组（方括号中）、对象（花括号中）、null
{ //JSON对象 "staff":[ //对象中的一个元素是数组 {"name":"红旗","age":70},//数组中的一个元素是一个对象，对象中包括了两个元素 {"name":"丽丽","age":17}, {"name":"科科","age":27} ] }JSON解析 eval()不安全（它不会管JSON字符串是否合法，还会执行其中包含的JS语句），不推荐使用 推荐使用JSON.parse()
var jsondata = '{"staff":[{"name":"红旗","age":70},{"name":"丽丽","age":17},{"name":"科科","age":27}]}'; var jsonobj = eval('('+jsondata+')'); alert(jsonobj.staff[0].name); var jsondata = '{"staff":[{"name":"红旗","age":70},{"name":"丽丽","age":17},{"name":"科科","age":27}]}'; var jsonobj = JSON.parse(jsondata); alert(jsonobj.staff[0].name);PS：JSON校验工具：JSONLint
对于前端而言，发送给服务端的数据格式并没有发生变化，主要是服务端将返回的内容封装成了一个JSON对象，前端在接收到时，需要对其做出一个解析：
JSON.parse(request.responseText);【换种方式实现】
在JQuery中封装好了一个方法专门用于进行异步传输： jQuery.ajax([settings]) type：类型，”POST”或”GET”，默认”GET” url：发送的地址 data：数据对象，连同请求发送到服务器的数据 dataType：预期服务器返回的数据类型。若不指定，jQuery自动根据HTTP包MIMIE信息来进行智能判断，一般采用json格式，设置为”json” success：一个方法，请求成功后的回调函数，传入返回后的数据，以及包含成功代码的字符串。 error：一个方法，请求失败时调用此函数。传入XMLHttpRequest对象。
$.ajax({ type: "GET", url: "http://127.0.0.1:8080/ajaxdemo/serverjson2.php?number=1" dataType: "json", success: function(data) { //data其实是jQuery的XHR对象的responseText，冰球这个responseText已经经过了JSON解析 }, error: function(jqXHR){ //jqXHR是jQuery的XHR对象。 } });【想要访问别人家的服务器数据】
什么是跨域 一个域名地址的组成：
http://www.abc.com:8080/scripts/jquery.js协议子域名主域名端口号请求资源地址不同域之间相互请求资源，就算作跨域，也就是说，除了请求资源地址外的其他组成部分，有一个不一样，就算是跨域。
JS处于安全方面的考虑，不允许跨域调用其他页面的对象。那么如何实现跨域呢：
1. 使用代理 在同域名的web服务器上建立一个代理。 例如： 如果www.a.com想要访问www.b.com 那么过程如下，网页a访问自己的服务器a，服务器a访问服务器b，将获得的内容再返回给网页a。 这种方式的关键之处在于服务器之间的访问，涉及到后端的技术。
2、JSONP （和Ajax没多大关系） JSONP可用于解决主流浏览器的跨域数据访问的问题（但，只能GET，不能POST）
其大体的思路就是： 若a要访问b的数据： 在a的页面中，给出一个函数y的定义。 a并包含b上的js文件b.js。 b.js文件调用函数y。
那么当a的页面加载时，b.js文件中的函数y就会执行，数据以函数参数为载体传给了a。
//在本地服务器a上有一个html页面，内容如下： <script> function sweet(data){ alert(data["name"]); } </script> <script src= "http://www.b.com/b.js"></script> //在远程服务端b上有一个js页面，b.js,内容如下： sweet({'name':'丽丽','age':'24'}); //结果就是加载a的html页面时，会弹出对话框，内容为“丽丽”更高级的用法，是让服务器b根据a的客户端的需求，自动地生成这个js文件的内容。 详细的内容请见：说说JSON和JSONP，也许你会豁然开朗，含jQuery用例
JQuery+jsonp JQuery中的ajax方法封装了上述步骤，只需要在之前代码添加以下代码：
//前端 dataType: "jsonp", //原来是json jsonp:"abc",传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback) jsonpCallback:"xx",自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 //服务器 $jsonp = $_GET["abc"]; //然后之前echo的语句之前都要加上这个变量 echo $jsonp . xxx; //点在php中是字符串的连接,原来是echo xxx;3、XHR-2 HTML5提供的XMLHttpRequest Level2已结实现了跨域访问 IE10以下版本不支持 只需要在服务端做一些小小的改造
header('Access-Control-Allow-Origin:*');//*的意思是所有都可以访问它 header('Access-Control-Allow-Methods:POST,GET');