AJAX(Asynchronous Javascript And XML)
概念：无需加载整个网页就可更新部分网页的技术
- 运用HTML和CSS来实现页面，表达信息；
- 运用XMLHttpRequest和web服务器进行数据的异步交换 ；
- 运用JavaScript操作DOM，实现动态局部刷新。
XMLHttpRequest
- XMLHttpRequest对象创建
var request;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari
}else{
request = new ActiveXObject("Microsoft.XMLHTTP");//兼容IE5,IE6- XMLHttpRequest发送请求
open(method,url,async) (async默认为true，异步)
send(string)（GET请求可不填写，POST请求一定要填写）
（setRequestHeader方法要写在open和send之间，否则会抛出异常。）
request.open("POST","create.php",true);//POST方法
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=李二狗&sex=女");- XMLHttpRequest取得响应
- requestText：获得字符串形式的响应数据
requestXML：获得XML形式的响应数据
status和statusText：以数字和文本形式返回HTTP状态码
getAllResponseHeader()：获取所有的响应报头
getResponseHeader()：查询响应中的某个字段的值
- readyState属性
0：请求未初始化，open还没有调用。
1：服务器连接已经建立，open已经调用了。
2：请求已接受，也就是接收到头信息了。
3：请求处理中，也就是接收到响应主体了。
4：请求已完成，且响应已就绪，也就是响应完成了。
- onreadystatechange事件监听
var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send
request.onreadystatechange = function(){
if(request.readyState === 4){
if(request.status === 200)}
document.getElementById("searchResult").innerHTML = request.responseText
}else {
alter("发生错误" + request.status);} }
HTTP
- 概念
HTTP是计算机通过网络进行通信的规则，是一种无状态协议。（不建立持久的连接，也就是服务端不保留连接的相关信息）- 步骤
1.建立TCP连接
2.Web浏览器向Web服务器发送请求命令
3.Web浏览器发送请求头信息
4.Web服务器应答
5.Web服务器发送应答头信息
6.Web服务器想浏览器发送数据
7.Web服务器关闭TCP连接- HTTP请求的组成部分
1.HTTP请求的方法或动作（GET或POST请求）
2.正在请求的URL
3.请求头（客户端环境信息，身份验证信息等）
4.请求体（客户提交的查询字符串信息，表单信息等）
GET：信息获取、使用URL传递参数**（发送信息的数量一般限制在2000个字符）
POST：修改服务器上的资源（对发送信息数量无限制）- HTTP响应的组成部分
1.数字和文字组成的状态码（用来显示请求成功还是失败）
2.响应头（服务器类型、日期时间、内容类型和长度等）
3.响应体- 状态码
1XX：信息类。表示收到Web浏览器请求，正在进一步的处理中。
2XX：成功。表示用户请求被正确接收。（200 OK）
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作。
4XX：客户端错误，表示客户端提交的请求有错误。（404 NOT Found，意味着请求中引用的文档不存在。）
5XX：服务器错误，表示服务器不能完成对请求的处理。
JSON
- JSON：JavaScript对象表示法（JavaScript）
1.JSON是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，已于人们阅读和编写，同时也易于机器解析和生成。
2.JSON是独立于语言的，什么语言都可以解析json。- JSON解析：eval和JSON.parse
1.eval：不会去看JSON字符串是否合法，字符串中的一些js方法会直接执行，比较不安全。
var jsonobj = eval( '(' + jsondata + ')' );
2.JSON.parse：可预报json字符串中的错误。
var jsonobj = JSON.parse(jsondata);- JSON校验工具
JSONLint
JQuery中的AJAX
jQuery.ajax([settings])
- type：类型，“POST”或"GET"，默认为“GET”。
- url：发送请求的地址。
- data：对象，连同请求发送到服务器的数据。
- dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式，可以设置为“json”
- success：方法，请求成功后的回调函数。传入返回后的数据，以及包含成功代码的字符串。
- error：方法，请求失败时调用此函数。传入XMLHttpRequest对象。
$(document).ready(function(){
$("#search").click(function(){
$.ajax({
type:"GET",
url:"service.php?number=" + $("#keyword").val(),
dataType:"json",
success:function(data){
if(data.success){
$("#searchResult").html(data.msg);
}else {
$("#searchResult").html("出现错误：" + data.msg); }
} ,
error:function(jqXHR){
alter(“发生错误：” + jqXHR.status); }
}); });
(POST方法多加一个data属性 data:{ })
($(document).ready() 与window.onload的区别)
(http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js 百度静态资源jquery库，可直接引入)
跨域（JS同源策略的限制）
- 1.域名地址：协议 + 子域名 + 主域名 + 端口号 + 请求资源地址
2.当协议、子域名、主域名、端口号重任意一个不相同时，都算作不同域。
3.不同域之间相互请求资源，就算作“跨域”。- 处理跨域方法一：代理
- 处理跨域方法二：JSONP
JSONP可用于解决主流浏览器的跨域数据访问的问题。（不支持POST请求）
前端：
data:"jsonp"
jsonp:"callback"- 处理跨域方法三：XHR2
1.HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能。
2.IE10以下的版本都不支持。
3.在服务器端做一些改造即可：
header('Access-Control-Allow-Origin:*');(*表示所有域都可以访问)
header('Access-Control-Allow-Methods:POST,GET');
