《Ajax基础详解》

Ajax基础详解

一、XMLHttpRequest对象

创建一个XMLHttpRequest对象

var request;

if(window.XMLHttpRequest){

      request=newXMLHttpRequest();//兼容IE7+,Firefox,Chrome,Safari...

}else{

      request=newActiveXObject("Microsoft.XMLHTTP");//IE6,IE5

}

console.log(request);

想了解Ajax先要了解一下HTTP请求

 

二、什么是HTTP

http是计算机通过网络进行通信的规则

它是一种无状态协议（也就是不建立持久的连接，也就是说服务端不保留连接的一些相关信息）

为了浏览器能够向服务器请求到信息

一个完整的HTTP请求，通常有下面七个步骤：

 

1，建立TCP连接

 

2，Web浏览器向WEB服务器发送请求命令

 

3，WEB浏览器发送请求头信息

 

4，WEB服务器应答

 

5，WEB服务器发送应答头信息

 

6，WEB服务器向WEB浏览器发送数据

 

7，WEB服务器关闭TCP连接

 

 

 

 

一个HTTP请求一般由四部分组成

 

1，HTTP请求的方法或动作，比如是GET还是POST请求

 

2，正在请求的URL(也就是请求的地址)

 

3，请求头，包含一些客户端环境信息，身份验证等信息

 

4，请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等

 

 

 

一个HTTP响应一般由三部分组成

 

1，一个数字和文字组成的状态码，用来显示请求是成功还是失败

 

2，响应头，响应头和请求头一样包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等

 

3，响应体，也就是响应正文

 

 

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

 

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

 

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

 

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

 

4XX:客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found，意味着请求中所引用的文档不存在

 

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

 

三、XMLHttpRequest发送请求

 

open(method,url,async);

method:发送请求的方式(Get/Post)

url:请求地址(可以是相对路径，也可以是绝对路径)

async:请求是同步的还是异步的，一般Ajax都是采用异步请求，也就是True,默认的就是true，所以一般的都不用填写

通过这个open函数我们就可以调用HTTP请求了

 

然后就是将请求发送到服务器

send(string);

在使用Get请求的时候，一般不用参数，因为所有的参数都拼接在了url中

在使用Post请求的时候，这个参数一定要填写

 

看一下例子：

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

request.send();

 

request.open("Post","create.php",true);

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//告诉服务器这发送的是一个表单

注意：这个setRequestHeader()要写在open()和send两个方法中间，不能写在send()后边

request.send("name=王二狗&sex=男");

 

四、XMLHttpRequest取得响应

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

responseXML:获得XML形式的响应数据

readyState:表示Ajax状态值

onreadystatechange:事件   该事件可以感知Ajax状态的变化

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){

           //做一些事情 request.responseText

      }

}

引出Json

Json:JavaScript对象表示法（JavaScript Object Notation）

 

Json是存储和交换文本信息的语法，类似XML。它采用键值对的方式来组织，易于人们阅读和编写，同时

也易于机器解析和生成

 

Json是独立于语言的，也就是说不管什么语言，都可以解析Json,只需要按照Json的规则来就行

 

Json语法规则：

JSON数据的书写格式是：名称/键值对

      名称/键值对组合中的名称写在前面(在双引号中)，值对写在后面(同样在双引号中),中间用冒号隔开，如：

"name":"郭靖"

 

json的值可以是下面这些类型：

数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true/false）、数组（在方括号中）、对象（在花括号中）、null

 

看一个例子

{

      "staff":[

           {"name":"洪七","age":70},

           {"name":"郭靖","age":35},

           {"name":"黄蓉","age":35}

      ]

}