Ajax

1.什么是Ajax?

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

2.http请求

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. 请求体（请求正文），包含客户提交的查询字符串信息，表单信息等（一般与请求头间有一个空行）

GET与POST：

GET：一般用于信息获取；使用url传递参数；对所发送信息的数量也有限制，一般在2000个字符（信息是公开的，在url中，幂等即执行多次GET对数据本身无影响）；

POST：一般用于修改服务器上的资源；对所发送信息的数量无限制（存表单，发送操作数据）；

http响应：

  1. 数字和文字组成的状态码，用来显示请求是成功或失败
  2. 响应头，与请求头类似
  3. 响应体

http状态码：

由3位数字构成，其中首位数字定义了状态码类型：
1xx：信息类，表示收到web浏览器请求，正在进一步的处理中
2xx：成功，表示用户请求被正确接收，理解和处理
3xx：重定向，表示请求没有成功，客户必须采取进一步的动作
4xx：客户端错误，表示客户端提交的请求有错误，例如：404 not found，意味着请求中所引用的文档不存在。
5xx：服务器错误，表示服务器不能完成对请求的处理：如500

参考：http://tool.oschina.net/commons?type=5

3.XMLHttpRequest发送请求

  • open(method,url,async)  method:发送请求的方法  url:地址  async:同步或者异步（默认为true，异步）
  • send(string)

     先调用再发送。

//GET

request.open("GET","getInfo.php",true);//True没有引号
request.send();

//POST:
request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-unlencoded");
request.send("name=小明&sex=男");

4.XMLHttpRequest取得响应

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

     readyState属性：

  • 0：请求未初始化，open还没有调用
  • 1：服务器连接已经建立，open已经调用了
  • 2：请求已接受，接收到头信息
  • 3：请求处理中，接收到响应主体
  • 4：请求已完成，响应完成

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","get.php",true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState === 4&& xmlhttp.status ===20){
    xmlhttp.responseText;
}
}

5.例子（Ajax+PHP）

可以直接在http://www.cnblogs.com/junglexj/p/6016755.html配置好环境里，继续配置站点；

源码参考：https://github.com/Mdreame/my-project/tree/master/Ajax

6.JSON

参考：http://www.runoob.com/json/json-tutorial.html

JSON解析：

  1. eval :eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。
  2. JSON.parse :安全、简单

为了避免出错和便于查看编辑，需要将JSON字符串格式化，推荐工具：

7.跨域

域名地址组成如：

http:// www. abc.com :8080/ scripts/jquery.js
协议 子域名 主域名 端口号 请求资源地址

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。

不同域间相互请求资源，就算作跨域。

跨域方法：

  1. 代理：在同域名的web服务器端创建一个代理： 
    //北京的web服务器的后台：
www.beijing.com/proxy-shanghaiservice.php
//来调用上海服务器
www.shanghai.com/service.php
//的服务，然后再把响应结果返回给前端
  2. JSONP： 
     1 //在www.aaa.com页面中：
 2 <script>
 3     function jsonp(json){
 4           alert(json["name"]);  
 5     }    
 6 </script>
 7 <script src="http://www.bbb.com/jsonp.js"></script>
 8 
 9 
10 //在www.bb.com页面中：
11 jsonp({'name':'小明','age':20});
  3. XHR2：在服务器端做一些小小的改造： 
    //头部添加：
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');

参考：Ajax全接触-http://www.imooc.com/learn/250

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/junglexj/p/6033053.html