在javascript中使用ajax

博客

前言

虽然jquery封装好的ajax函数屏蔽了一些ajax的底层操作，用起来很简单。但了解ajax的工作原理对深入理解ajax很有帮助。ajax是一种异步刷新的技术，本质上是通过javascript实现的。通常与服务器交换数据需要刷新页面，在等待服务器响应时用户不能对页面做任何操作，这就是同步。而用了ajax后在等待服务器的响应时，用户不用刷新，可以继续操作页面，这就是异步。

一，http请求

因为ajax是和服务器交互，读取数据要走http协议。所以要先理解http请求的过程。一个完整的http请求通常有以下7个步骤：

• 浏览器向web服务器发送请求命令
• 建立TCP连接
• 浏览器发送请求头信息
• web服务器应答
• web服务器发送响应头信息
• web服务器向浏览器发送数据
• 双方关闭TCP连接

当页面用了ajax后这些过程就可以通过浏览器的审查元素中的nextwork查看到。

http状态码

通过状态码可以知道http请求处于什么状态，比如成功还是失败。
HTTP响应的状态码由三位数字组成，其中首位数字定义了状态码的类型：
1XX：信息类，表示收到Web浏览器请求，正在进一步的处理中。
2XX：成功，表示用户请求被正确接收、理解和处理，例如：200 OK。
3XX：重定向，表示请求没有成功，客户必须采取进一步的动作。
4XX：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found。
5XX:服务器错误，表示服务器不能完成对请求的处理，如500。

二，请求方法

http请求有2种方法，get方法与post方法。
GET方法一般用于读取信息，在url中传输数据，对数据大小有限制，安全性低。是http请求默认的方法。
POST方法一般用于修改服务器中的资源，比如上传数据创建对象，对数据大小无限制，不在url中传递数据，因此安全性较高。

三，Ajax请求

ajax请求一般分为4个步骤。

1,创建对象

ajax核心是XMLHttpRequest，它是javascript中的一个对象，利用它ajax才能实现异步刷新。现代浏览器大都支持XMLHttpRequest对象，但有些早期浏览器不支持这个对象，比如令人恶心的IE6。不过可以用下面的写法兼容所有的浏览器：

<script type="text/javascript">
var request;
if (window.XMLHttpRequest) {
    request=new XMLHttpRequest();//IE7+,FF,chrome,opera,safari
}else{
    request=new ActiveObject("Microsoft.XMLHTTP");//IE6-
}
</script>

2,连接服务器

用open()方法请求连接服务器，open的参数形式:open(method,url,async),

• method:请求的方法，get或post，无大小写之分。
• url:文件在服务器上的位置，相对或绝对位置。
• async:布尔值true或false，表示是否异步处理请求，默认true，可省略。
  例如request.open("GET","demo.php",true);

3,发送请求数据

用send()方法请求数据，当使用GET发送请求时，send方法可以不写参数，这也很好理解，因为你是向服务器请求读取数据，所以什么参数都不用传。而用POST发送请求时，用send(string)这样的形式把数据发送到服务器上。

4，接收返回值

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有XMLHttpRequest 的状态信息。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

if (request.readyState==4) {
    if (request.status==200) {
    document.getElementById('text').innerHTML=request.responseText;
    }else{
        alert("发生错误："+request.status);
    };
};  

注意事项

当使用POST方法向服务器发送数据时，在open()和send()之间要写上这么一句代码：

//以表单的形式发送数据
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

表示定义要发送的数据的类型，如果不是上传文件，一般Content-Type是application/x-www-form-urlencoded。

四，代码示例

后记

这些都是ajax的基础知识，ajax主要应用于服务器脚本与服务器交互，例如php，要深入研究ajax后端语言要会一点。关于上面例子要注意onreadystatechange事件都是小写的，我因为大小写原因导致点击按钮没反应，后来在那里alert一下才发现那段代码没执行。写代码还是要细心吧，不然一个字母错误就导致找半天bug。还有一点，在判断readyState和status时，不要写在一起，像这样

if (request.readyState==4&&request.status==200) {
//do something
}else{
alert("发生错误："+request.status);
}

这样写会导致弹出多次“发生错误：200”，很奇怪是不是，明明200（代表成功）了，还会提示错误？是因为readyState有个变化过程，从0-4。为了避免错误把它们分开写就没事了，因为这样会等到readyState变化到4时才判断status，而不是同时。