【AJAX02】AJAX使用

AJAX的使用步骤比较固定,基本如下:

1 创建对象

使用AJAX首先需要的就是创建核心对象XMLHttpRequest

var xmlHttpRequest = new XMLHttpRequest();

2 绑定事件

创建了核心对象以后,需要为对象绑定一个固定的事件onreadystatechange,为了接收服务器端传回的数据:

xmlHttpRequest.onreadystatechange=function () {
    if( xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
        处理服务器返回数据
    }
}

当请求被发送到服务器时,我们需要执行一些基于响应的任务;每当readyState改变时,就会触发onreadystatechange事件,此事件可以指定一个处理函数 function:通过判断 XMLHttpReqeust对象的状态,获取服务端返回的数据;

XMLHttpRequest对象有三个重要的属性:

onreadystatechange属性:表示readyState属性的改变事件,可以赋值一个 js函数名或直接定义函数,每当readyState属性改变时,就会自动调用该函数;

readyState属性:表示XMLHttpRequest 的状态,取值范围从 0到4变化:

  • 0:程序的内部执行,表示请求还未初始化,正在创建异步请求对象var xmlHttpRequest= new XMLHttpRequest()

  • 1: 表示初始化异步请求对象,opne方法被执行,xmlHttp.open(请求方式,请求地址, true)

  • 2:表示异步对象发送请求,send方法被执行,xmlHttp.send()

  • 3:表示异步对象接收从服务端返回的应答数据,此时服务器端代码已经执行完毕,正在向浏览器端给予响应;

  • 4:表示异步请求对象已经将数据解析完毕, 此时服务器端响应结束,浏览器可以接收服务器传回的数据,可以读取数据;

3 初始化异步请求对象

初始化异步请求对象需要调用open方法:

xmlHttpRequest.open("get","sendAjax?d1_value="+d1_value,true);
  • "get":第一个参数,代表请求的方式,可以是GET 或 POST;

  • "sendAjax?d1_value="+d1_value:第二个参数,代表服务器Servlet的请求路径,可以是相对路径也可以是绝对路径,并且可以携带请求参数;

  • true:第三个参数,代表请求的同步异步发送方式;

    • true(异步,默认);

    • false(同步) ;

4 发送请求

发送请求比较简单,直接调用send方法即可:

xmlHttpRequest.send();

5 接收服务器响应的数据

如需获得来自服务器的响应,则需要使用 XMLHttpRequest对象的responseTextresponseXML属性来进行接收:

  • responseText:接收字符串形式的响应数据;

  • responseXML:接收XML形式的响应数据;

例如:

var responseText = xmlHttpRequest.responseText;

版权声明:
作者:jackqiang
链接:http://www.jackqiang.com/javaweb/script/ajax/2193/use_ajax/
来源:JackQiang's
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录