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字符串格式化，推荐工具：

• http://www.runoob.com/jsontool
• http://jsonlint.com/

 

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：

   //在www.aaa.com页面中：
   <script>
       function jsonp(json){
             alert(json["name"]);  
       }    
   </script>
   <script src="http://www.bbb.com/jsonp.js"></script>
   
   
   //在www.bb.com页面中：
   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