AJAX—XMLHttpRequest对象

原创 2016年08月28日 21:23:16

使用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()

发送请求消息

 

 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

ajax中XMLHttpRequest对象详解

ajax中XMLHttpRequest对象详解         ajax技术的核心或者说负责ajax进行同步或者异步服务器请求是XMLHttpRequest对象。在用使用ajax技术时,其实就是操作...
  • aozeahj
  • aozeahj
  • 2016年11月02日 14:23
  • 919

Ajax概念介绍(同步和异步,XMLHttpRequest 对象,ajax-http请求,MLHttpRequest发送请求,XMLHttpRequest取得响应)

AJAX:Asynchronous JavaScript and XML (异步的 JavaScript 和 XML) Ajax 不是某种编程语言,是一种在无需重新加载整个网页的情况下能够更新部分网页...
  • qq_18407565
  • qq_18407565
  • 2017年05月19日 22:30
  • 691

AJAX——XMLHttpRequest对象主要属性和事件

readyState属性 有5个取值:0、1、2、3、4,表示HTTP请求的状态和服务器的响应。此属性的值一般不会递减,除非在正在进行的请求中调用了abort()或open()方法。理论上,每当这个属...
  • ruoyiqing
  • ruoyiqing
  • 2014年09月11日 00:04
  • 2277

关于进行ajax中error回调函数出现XMLHttpRequest status = 0的问题

最近在进行ajax与后台通信时,本身ajax写法没问题,但是错误代码却出现了,如下:             com.ajax({                 url: '/api/s...
  • u010116861
  • u010116861
  • 2016年12月22日 16:56
  • 589

Ajax获取XmlHttpRequest对象的方法,兼容IE、火狐。用来与服务器进行通信。

方法一: function ajaxFunction(){    var xmlHttp;    try{ // Firefox, Opera 8.0+, Safari         x...
  • hongtengfei523
  • hongtengfei523
  • 2015年10月02日 18:22
  • 1307

【AJAX】XmlHttpRequest对象详解(API)

翻译:《javascript : The Definitive Guide, 5th Edition》 英文:《异步交互(二)》 一、XMLHttpRequest对象获取         对象获取...
  • reliveIT
  • reliveIT
  • 2015年05月12日 15:04
  • 1581

跨浏览器 创建xmlhttprequest 对象 以及和服务器交互的全过程

//创建xhr对象  function creat(){          var xhr; try{              xhr = new XMLHttpRequest();   ...
  • sinat_32067081
  • sinat_32067081
  • 2016年10月18日 23:03
  • 354

AJAX入门--- XMLHttpRequest对象的属性和方法

由于刚刚接触到Ajax对其比较陌生,而其中的XMLHttpRequest对象更是未曾听闻。开始学之前,了解一下它的属性和方法为它的使用做下铺垫。本文重点介绍XMLHttpRequest的属性和方法。 ...
  • Senior_lee
  • Senior_lee
  • 2014年08月02日 21:34
  • 1713

在微信中调用ajax出现的问题,XMLHttpRequest对象没有初始化

背景:最近在开发微信,使用的是asp.net开发,Jquery版本是1.8.0。    在微信中点击按钮触发事件,调用ajax与服务器端进行交互,回调函数走的是error。   分析...
  • qq_34482827
  • qq_34482827
  • 2016年06月12日 12:14
  • 2856

Ajax处理XML,XMLHttpRequest对象的创建和访问servlet并返回xml数据到页面展示

相关说明全在注释中: 1,ajaxxml.js //用户名检验方法 //这个方法将使用XMLHTTPRequest对象进行AJAX的异步数据交互 var xmlHttp; function ...
  • qq445422083
  • qq445422083
  • 2012年09月11日 00:16
  • 5920
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX—XMLHttpRequest对象
举报原因:
原因补充:

(最多只允许输入30个字)