什么是Ajax？

1. 什么是Ajax？
Asynchronous JavaScript and XML（异步的Javascript和XML），它不是某种编程语言，而是一种在无需刷新整个网页的情况下能够更新部分网页的技术。
2. 同步和异步
运用HTML和CSS来实现页面，表达信息；
运用XMLHttpRequest和web服务器进行数据的异步交换；
运用Javascript操作DOM，实现动态局部刷新
3.XMLHttpRequest（XHR）对象创建

var request; if(window.XMLHttpRequest){ request=new XMLHttpRequest();//IE7+,FF,Chrome,Opera,Safari... }else{ request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5 }

4.HTTP请求
http是计算机通过网络进行通信的规则
http是一种无状态的协议，服务端不保存链接的信息，一个完整的http请求过程，一般有以下7个步骤：
一、建立TCP连接
二、Web浏览器向Web服务器发送请求命令
三、Web浏览器发送请求头信息
四、Web服务器应答
五、Web服务器发送应答头信息
六、Web服务器向浏览器发送数据
七、Web服务器关闭TCP连接
一个http请求由四部分组成：
一、HTTP请求的方法或动作，比如是GET请求还是POST请求；
二、正在请求的URL
三、请求头，包含客户端环境信息，身份验证信息等
四、请求体，和请求头之间一般有一个空行
GET请求：一般用于信息获取，使用URL传递参数，对发送信息的数量有限制，一般在2000个字符。
POST请求：一般用于修改服务器上的资源，对所发送信息的数量无限制。
一个HTTP响应由三部分组成
一、一个数字和文字组成的状态码，用来显示请求是成功还是失败
二、相应头
三、相应体
响应状态码
1XX：信息类，表示收到Web浏览器请求，正在进一步处理中
2XX：成功，表示用户请求被正确接收，理解和处理。
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作
4XX：客户端错误，表示客户端提交的请求有错误
5XX：服务器错误，表示服务器不能完成对请求的处理
5.XHR发送请求
request.open(method,url,async):method:请求方法，不区分大小写（一般用大写），第三个参数默认为false，异步
request.send(string)：将请求发送到服务器，用get方法的时候，参数可以不填写
6.XHR获取请求
readyState：它的变化代表服务器响应的变化
0:请求未初始化，open还没有被调用
1:服务器连接已建立，open已经调用了
2:请求已接收，也就是接收到头信息了
3:请求处理中，也就是接受到响应主体了
4:请求已完成，且响应已就绪，也就是响应完成了

var request=new XMLHttpRequest(); request.open("GET","get.php",true); request.send(); request.onreadystatehcange=function(){ if(request.readyState===4&&request.status===200){//做一些事情} }

7.示例
fiddler可用于调试服务器代码（在无客户端代码的情况下）
POST情况下，不要忽略Content-Type：application/x-www-urlencoded
request.setRequestHeader("Content-Type","application/x-www-urlencoded");
8.JSON
JSON：JavaScript对象表示法（JavaScript Object Notation）
JSON是存储和交换文本信息的语法，类似XML。采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成
JSON和XML的比较
JSON的长度和XML比起来很短小
json读写速度快
json可以用JavaScript内建的方法直接进行解析，转换成JavaScript对象，非常方便
json的值可以是下面这些类型：
数字、字符串（在双引号中）、逻辑值、数组（在方括号里）、对象（在花括号里）、null

{ “staff":[ {"name":"红旗","age":70}, {"name":"红旗","age":70}, {"name":"红旗","age":70} ] }

json的解析
一般有两种方式：eval和parse
eval不光可以解析字符串，还可以执行json中的方法，这样很不安全
而parse则不会
json校验工具：JSONLint
9.JQuery中的Ajax

$("#save").click(function(){ $ajax({ type:"POST", url:"service.php", dataType:"json", data:{ name:$("#staffName").val(), number:$("#staffNumber").val(), sex:$("#staffSex").val(), job:$("#staffJob").val() } success:funtion(data){ if(data.success){ $("#searchResult").html(data.msg); }else{ $("#searchResult").html("出现错误："+data.msg) } } error:function(jQXHR){ alert("发生错误："+jqXHR.status) } }) })

10.跨域
一个域名地址的组成：
协议：http://
子域名：www.
主域名：abc.com
端口号：8080
请求资源地址：script/jquery.js

当协议、子域名、主域名、端口号中任一个不相同时，都算作不同域。
不同域之间相互请求资源，就算做跨域
javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。
处理跨域的方法一：代理
通过在同域名的web服务器端创建一个代理（属于后台技术范畴）
处理跨域的方法二：JSONP（只支持GET请求）
处理跨域的方法三：XHR2
HTML5提供的XMLHttpRequest Level2:支持跨域访问（IE10以下不支持）

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