ajax基础信息前面都已经介绍过了。这个就略过。
使用原生js操作ajax的话还是比较容易的,跟前面的一篇内容基本差不多。
使用步骤:
一、创建对象 XMLHTTPRequest/ActiveOBject
二、发送请求 open()、send()
三、服务器响应 responseText(onreadystatechange、readyState、status)
步骤大体就分为这三个。
创建对象
var xmlHttp; if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); }else{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
如果是ie5、ie6的浏览器是不支持 XMLHttpRequest()这个对象的,需要用ActiveXObject()这个对象来实现。
上面的window.XMLHTTPRequest判断浏览器是否支持XMLHttpRequest()这个功能,如果支持就创建对象不支持则创建ActiveXObject对象。
发送请求
使用open()方法来创建请求,里面有两个参数,第一个参数是用什么方式来请求,一般常用的get post两种,第二个参数就是要请求的url地址。
用send()方法来发送参数,如果请求的地址不带参数则填null。
xmlHttp.open("GET","ceshi.php");xmlHttp.send(null);
这儿访问的是本地的ceshi.php,这个不管哪种编程语言,只要是能开发web的编程语言都可以实现。
服务器响
使用responseText来接收服务器响应
xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200 || xmlHttp.status==304){ alert(xmlHttp.responseText); } }}
第一个判断 onreadystatechange 当请求被发送到服务器时,需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState是指存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
以下就是readyState存储的值。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
所以在上面判断readyState是否等于4 如果等于4的话就代表响应已经完成。
status这个是一个状态值判断200或者304是请求处于正常状态。
常用status状态值有 200(正常) 403(找不到页面) 500(服务器异常)。
至此前台的程序已经完毕。
接下来需要在程序文件 ceshi.php文件里面创建内容,这儿只做个简单的演示内容
ceshi.php
ceshi"?>
上面只是用aler打印出来。如果要放到网页页面上,就需要大家学习DOM的内容了。