这是微博秀地方
KUYH

Ajax XMLHttpRequest对象的一个简单小例子

XMLHttpRequest()是一个构建HTTP请求的JavaScript对象(即构造器)。
XMLHttpRequest()对象的用法,主要分为两个有效步骤:

  • 发送请求——这一步,完成XMLHttpRequest对象的构建,并为其设置时间监听器。
  • 处理响应——这一步,事件监听器会在服务器的响应信息到达时发出通知,然后代码就会忙于从中提取有用的信息

发送请求
1、创建一个对象,并为其设置一个能触发readystatechange事件的事件监听器

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = callback;

2、调用open()方法

xhr.open('GET', 'myfile.txt', true);

第一个参数是http请求的类型(GET、POST、HEAD等);第二个参数是请求目标的URL(该示例请求的是与当前页面处于同一目录下的文本文件myfile.txt)。第三个参数是布尔值,该值决定了请求是否按照异步的方式进行(true表示异步请求,false表示不是异步请求)。
PS: 记得先在同目录下新建myfile.txt文件写入一些内容,这里我写入“This is my first XMLHttpRequest demo!”

3、发送请求。

xhr.send(''); //该示例发送一个空字符串

处理响应
每个XHR对象中都有一个readystate属性。一旦该属性值改变就会触发readystatechange事件。该属性可能的状态中有:

  • 0——未初始化状态
  • 1——载入请求状态
  • 2——载入请求完成状态
  • 3——请求交互状态
  • 4——请求完成状态当请求的值为4时,说明服务端的响应信息已经返回,可以处理了。在callback函数中,除了确定readyState的值是4外,还要检查http请求的状态码。如果目标URL实际上不存在,就会收到一个值为404的状态码(表示未找到文件),正常情况下值为200。状态码可以通过XHR对象的statues属性来获得。
    一旦xhr.readyState值为4并且xhr.status值为200,就可以通过xhr.responseText来访问目标URL中的内容了。下面代码演示了在callback中实现用alert()方法来显示目标URL中的内容:
function callback() {
  if (xhr.readyState < 4) {
    return;
  };
  if (xhr.status !== 200) {
    alert('the status code is not ok');
    return;
  };
  alert(xhr.responseText);
}

启动服务可看到如下效果

浏览器中出现如下alert弹窗,实现了用alert()方法来显示myfile.txt的内容。

一个完整的小例子:


var xhr =new XMLHttpRequest();
	xhr.onreadystatechange=callback;
	xhr.open('GET','myfile.txt',true);
	xhr.send('');

	function callback(){
	if(xhr.readyState==4 && xhr.status==200){
		var hhh=  document.querySelector('.newtest');
		hhh.innerText=xhr.responseText;
		}
}

码字很辛苦,转载请注明来自KUYH《Ajax XMLHttpRequest对象的一个简单小例子》

评论