AJAX基础

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');