AJAX学习笔记（一）基础知识

一、HTTP协议

1、HTTP: 计算机通过网络进行通讯的规则，用于浏览器向服务器发送请求。

2、HTTP是一种无状态的协议，无状态是指服务器端不保留任何连接相关的信息，浏览器客户端向服务器发送请求，服务器端返回响应，然后连接就关闭了，这个连接不存在任何记忆。后续的处理如果需要之前连接传递的信息，则需要重新传递。

3、完整的HTTP请求需要以下7个步骤：

（1）建立TCP连接，通常HTTP协议都是用TCP协议连接，TCP是可靠的协议。

（2）Web浏览器向Web服务器发送请求命令。

（3）Web浏览器发送请求头信息。

（4）Web服务器应答。

（5）Web服务器发送应答头信息。

（6）Web服务器向浏览器发送数据。

（7）Web服务器关闭TCP连接。

4、一个HTTP请求包含四个部分：

（1）HTTP请求的方法：GET或者POST。

（2）请求的URL，即请求的地址。

（3）请求头，包含客户端环境信息、身份验证信息等。

（4）请求体，也就是请求正文，包含客户提交的查询字符串信息、表单信息等。

5、GET方法与POST方法

（1）GET：一般用于获取信息，即查。使用URL传递参数，参数一般为用户获取信息的条件。HTTP协议默认使用的方法是GET方法，对于查询请求，GET方法是安全的，但用GET方法发送用户名和密码是不安全的，因为GET请求发送的信息对任何人都是可见的，GET请求所传输的数据都会显示在URL路径中。GET方法对所发送信息的数量有限制，一般在2000个字符。

（2）POST：一般用于修改服务器上的资源，即增、删、改等。一般是通过表单向服务器传递数据，所传递的数据并不可见，所传递的都被封装在请求体中。

6、一个HTTP相应包含三个部分：

（1）响应码：一个数字或文字组成的状态码，用来显示请求成功还是失败。

（2）响应头：包含服务器的信息，如服务器类型、日期时间、内容类型和长度等。

（3）响应体：响应正文，即返回的响应信息内容。

7、HTTP响应状态码介绍：

1XX：信息类，表示收到WEB浏览器的请求，正在进一步的处理中。

2XX：成功，表示用户的请求被正确接收、理解和处理：如200 OK。

3XX：重定向，表示请求没有成功，客户必须采取进一步的动作。

4XX：常见，客户端提交的请求有错误，比如：404 NOT FOUND，意味请求的路径不存在等。

5XX：常见，服务器错误，表示服务器不能完成对请求的处理，比如500错误。

二、使用XMLHttpRequest对象发送请求：

AJAX最重要的部分就是使用XMLHttpRequest对象发送请求，XMLHttpRequest对象针对IE7以上、Firefox、Chrome、Safari以及Opera，对于IE5和IE6则使用ActiveXObject对象，因此创建对象的方法如下：

var xmlHttpRequest;

if(window.XMLHttpRequest){//存在XMLHttpRequest，表示是IE7及其他主流浏览器。

     xmlHttpRequest = new XMLHttpRequest();

}else{

     xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

该对象通过两个方法发送请求。

1、open（method,url,async）:

method：POST或者GET。

url：请求的路径。

async：是否异步，true表示异步，false表示同步，默认为true，AJAX一般用异步。

备注：同步和异步：同步表示同一时间只能执行一个请求，后面的请求必须等到前面的请求执行完毕才能继续执行；异步表示多个请求可以同时执行，不必等待前一个请求执行完毕，异步的请求效率远远高于同步请求。

2、send（string）：发送请求，send（string）方法的String类型的参数用于传递请求的参数，由于GET方法的参数通常接在url的后面，因此在使用GET方法发送请求时，send（string）方法的参数可以不填写或者填写null；而POST方法不能通过url传递参数，因此当使用POST方法发送请求时，通常send（string） 方法String类型的参数都要填写，当然不填写也没有错，但应用情况很少。

3、XMLHttpRequest.setRequestHeader()方法

     setRequestHeader()方法用于在发送HTTP请求时对请求头包含信息的设置和更改。通常有两个参数，第一个参数表示请求头中的字段名称，第二个参数表示该字段名称对应的内容。比如原始请求头：

        GET /bb.asp?www=1234 HTTP/1.1 

　　Accept: */* 

　　Accept-Language: zh-cn 

　　UA-CPU: x86 

　　Accept-Encoding: gzip, deflate 

　　User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 

　　Host: www.e4j.cn:89 

　　Connection: Keep-Alive 

　　Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII

调用setRequestHeader()方法对请求头信息进行更改：

         xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");

         xmlHttpRequest .setRequestHeader("Content-length", paramsSend.length);

此时的请求头内容为：

        GET /bb.asp?www=1234 HTTP/1.1 

　　Accept: */* 

　　Accept-Language: zh-cn 

　　UA-CPU: x86 

　　Accept-Encoding: gzip, deflate 

　　User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727) 

　　CONTENT-TYPE:application/x-www-form-urlencoded 

　　Host: www.e4j.cn:89 

　　Content-length: 8 

　　Cookie: %C3%F7%CC%EC=%B0%CB;ASPSESSIONIDASDBSDRR=BLEDBIBBCGKBJAKJCFEJKGII

     xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");设置了一个请求头，表示设置提交给服务器文本内容的编码方式是URL编码，还有其他编码方式，比如文件上传的 CONTENT-TYPE:multipart/form-data

    xmlHttpRequest .setRequestHeader("Content-length", paramsSend.length);表示提交的数据的字节大小，对于采用GET方法提交的请求，由于不需要提交数据，Content-length 是无效的。

     XMLHttpRequest.setRequestHeader()方法必须写在open()和send（string）方法的中间，否则会抛出异常。

4、XMLHttpRequest取得响应

     responseText：获得字符串形式的响应数据。

     responseXML：获得XML形式的响应数据。通常应用中都是用Json返回响应信息。

     status和statusText：以数字和文本形式返回HTTP状态码

     getAllResponseHeader(): 获取所有的响应报头

     getResponseHeader(String string): 查询响应中的某个字段的值。

5、监听响应状态

     readyState属性：

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

     1：服务器连接已建立，open已经调用了。

     2：请求已接收，已经接收到头信息了。

     3：请求处理中，已经接收到响应主体了。

     4：请求已完成，响应完成了。

     监听响应状态的方法：onreadystatechange事件，在readyState属性变化的时候会触发，

     var request = new  XMLHttpRequest();

     request.open("GET","get.php",true);

     request.send();

     request.onreadystatechange = function(){

          if(request.readystate === 4 && request.statue === 200){//readystate表示响应状态，status表示请求状态

                        do something; 

          }

     }

     备注：在js中两个等号和三个等号的区别，如果采用两个等号比较大小，当“==”两边的变量类型不相同时，会自动转换成相同的类型再进行比较；当采用三个等号时，“===”两边变量的类型不相同，则比较结果为不等。比如：

      var a = 0, b = ‘0’;  alert((a == b) + ‘–‘ + (a === b))此时看到的结果为“true–false”。

    具体比较规则见链接：http://zzstudy.offcn.com/archives/10937  

　  参考资料网址：慕课网Ajax全接触视频：

http://www.360kan.com/va/asEsaXNu8pk7ED.html

　  XMLHttpRequest.setRequestHeader()

：http://www.cnblogs.com/s-y-l/archive/2011/11/02/2233076.html