AJAX—XMLHttpRequest对象

使用XHR发起HTTP请求的步骤

  //1 创建xhr对象

<span style="white-space:pre">	</span>var xhr = null;

<span style="white-space:pre">	</span>if(window.XMLHttpRequest){//其它浏览器

<span style="white-space:pre">		</span>xhr = new XMLHttpRequest();

<span style="white-space:pre">	</span>}else {                          //解决老IE兼容问题

   <span style="white-space:pre">		</span>xhr = new ActiveXObject('Microsoft.XMLHttp');

<span style="white-space:pre">	</span>}


  //2 监听xhr的状态改变事件

<span style="white-space:pre">	</span>xhr.onreadystatechange = function(){

<span style="white-space:pre">		</span>if(xhr.readyState===4){//响应消息接收完成

<span style="white-space:pre">		</span>if(xhr.status===200){//响应完成且成功

<span style="white-space:pre">		</span>}else{//响应完成但有问题
<span style="white-space:pre">	</span>
<span style="white-space:pre">			</span>}
<span style="white-space:pre">	</span>
<span style="white-space:pre">		</span>}

<span style="white-space:pre">	</span>}


  //3 连接到服务器

<span style="white-space:pre">	</span>xhr.open('GET', 'x.php', true);//参数为(“请求方式”,“请求文件地址”,“是否是异步请求”)
	<span style="white-space:pre">	</span>		<span style="white-space:pre">	</span>//GET请求时,请求内容放在地址后,“?K=V”

  //4 发送请求消息

<span style="white-space:pre">	</span>xhr.send( null / 'k=v&k=v' );
 

 

(1)AJAX概述    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript XML

   实现原理:在客户端浏览网页内容的同时,服务器在提供最新的内容,局部更新在页面中

——无提交无刷新的页面内容局部更新技术


   AJAX应用涉及到的技术:HTML、CSS、JS、DOM、XML、HTTP协议等

——纯前端技术,需要与Web服务器交互。

 

(2)AJAX应用的核心JS对象:

——XMLHttpRequest:向Web服务器发起HTTP请求,并接收响应消息。

 

 

 XMLHttpRequest对象成员

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0:UNSENT

请求消息未初始化

1:OPENED

XHR已经打开到服务器的链接(xhr.open()已启动)

2:HEADERS_RECEIVED

请求已经发送完成,开始接受响应消息头部

3:LOADING

解析,加载响应消息主体

4:DONE

响应消息接受完成

 

status:

响应状态码readyState变为2才有值--200表示响应成功

statusText

原因断句,readyState变为2才有值

 

response

响应数据

responseType

响应数据的类型                //默认值是空字符串

responseText

字符串形式的响应数据

responseXML

XML形式的响应数据

responseURL

返回响应的经过序列化的URL

timeout:0

用于规定超时时间,(与ontimeout事件一起使用)

 

XHR对象的核心成员事件

onreadystatechange

当xhr.readyState属性值发生改变

 

XHR对象的成员方法

getAllResponseHeaders()

 

getResponseHeader()

读取响应头部

setRequestHeader()

设置请求头部

Open()

打开到服务器的链接

send()

发送请求消息

 

 

 

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_34187209/article/details/52347916
上一篇核心DOM和html DOM的区别
下一篇总结-DOM的操作方法和知识点
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭