AJax基础

概念介绍–同步

步骤：
- 客户端 发送请求，等待相应
- 服务端 处理请求，返回相应
- 客户端 页面载入
- 。。。

概念介绍–异步

• 运用HTML和CSS来实现页面、表达信息;
• 运用XMLHttpRequest和web服务器进行数据的异步交换；
• 运用JavaScript操作DOM，实现动态局部刷新;

概念介绍–HTTP

• 一个完整的HTTP请求过程，通常有如下7个步骤：

  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. 请求体，即请求正文。请求正文中可以包含客户提交的查询字符串信息，表单等待。

• HTTP状态码由三位数字构成，其中首位数字定义了状态吗的类型：

  1. 1XX:信息类，表示收到Web浏览器请求，正在进一步的处理中
  2. 2XX:成功，表示用户请求被正确接收，理解和处理。例如：200 OK
  3. 3XX: 重定向，表示用户请求没有成功，客户端必须采取进一步的动作
  4. 4XX: 客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，意味着请求中所引用的文档不存在。
  5. 5XX: 服务器错误，表示服务器不能完成对请求的处理。如：500

概念介绍–XMLHttpRequest

1. XMLHttpRequest对象实例化

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

1. XMLHttpRequest发送请求

   • open(method, url, async)

   method:发送请求方法
   url: 请求地址
   async:请求同步/异步，默认true(异步)

   • send(string)

例如：
request.open(“GET”, “get.php”, true);
request.send();

request.open("POST", "post.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=lxd&sex=male");

1. XMLHttpRequest取得响应

   • responseText: 获得字符串形式的响应数据
   • responseXML: 获得XML形式的响应数据
   • status和statusText: 以数字和文字形式返回HTTP状态码
   • getAllResponseHeader(): 获取所有的响应报头
   • getResponseHeader(): 查询响应中的某个字段的值

   • readyState属性

   • 0：请求未初始化，open还没有调用

   • 1：服务器连接已经建立，open已经调用了
   • 2：请求已接收，即接收到头信息了
   • 3：请求处理中，即接收到响应主体了
   • 4：请求已完成，且响应已就绪，即响应完成了

   var request = new XMLHttpRequest();
   request.open(“GET”, “get.php”, true);
   request.send();
   request.onreadystatechange = function() {
   if (request.readyState === 4 && request.status === 200) {
   //do sth requst.responseText
   }
   }

JSON 基本概念

• JSON：JavaScript对象表示法(JavaScript Object Notation)

扩展知识–跨域方式处理

跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。简单的理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。

处理跨域的方式：
1. 代理

在同域名的web服务器建立一个代理

1. JSONP

   JSONP可用于解决主流浏览器的跨域数据访问的问题。

2. XHR2