js建立XMLHttpRequest对象及其属性和方法

最新推荐文章于 2021-06-30 16:32:34 发布
最新推荐文章于 2021-06-30 16:32:34 发布
阅读量1.1k 收藏
点赞数
分类专栏： HTML/CSS/JS
 
  1. //定义变量，存储对象   
  2. var xmlHttp;   
  3. //创建XMLHttpRequest对象   
  4. function creatXMLHttpRequest()   
  5. {   
  6.     if(window.ActiveXObject)   
  7.     {   
  8.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
  9.     }   
  10.     else if(window.XMLHttpRequest)   
  11.     {   
  12.         xmlHttp=new XMLHttpRequest();   
  13.     }   
  14. }   
  15. //使用get方式建立与后台的交互   
  16. function callServer()   
  17. {   
  18.     creatXMLHttpRequest()   
  19.     var email=document.getElementById("TxtEmail").value;   
  20.     if(email=="")   
  21.     {   
  22.         document.getElementById("LabMsg").innerText="请输入邮箱！";   
  23.         document.getElementById("LabMsg").style.color="red";   
  24.     }   
  25.     else  
  26.     {   
  27.         url="register.aspx?email=" + email + "&ts" + new Date().getTime();   
  28.         xmlHttp.onreadystatechange=handleStateChange;   
  29.         xmlHttp.open("GET",url,true);   
  30.         xmlHttp.send(null);   
  31.     }   
  32. }   
  33. //回调函数，后台处理完结果后返回给回调函数   
  34. function handleStateChange()   
  35. {   
  36.     //请求的状态有5个值：0=未初始化；1=正在加载；2=已经加载；3=交互中；4=完成；  
  37.     if(xmlHttp.readyState==4)   
  38.     {   
  39.         //200对应OK，如404=未找到网页   
  40.         if(xmlHttp.status==200)   
  41.         {   
  42.             var result=xmlHttp.responseXML.getElementsByTagName("result")[0].firstChild.nodeValue;   
  43.             if(result=="true")   
  44.             {   
  45.                 document.getElementById("LabMsg").innerHTML="恭喜，可用！";   
  46.                 document.getElementById("LabMsg").style.color="red";   
  47.             }   
  48.             else if(result=="false")   
  49.             {   
  50.                 document.getElementById("LabMsg").innerText="该邮箱已存在！";   
  51.                 document.getElementById("LabMsg").style.color="red";   
  52.             }   
  53.         }   
  54.     }   
  55. }   
  56.   
  57. post请求   
  58.     url="register.aspx?email=" + email + "&ts" + new Date().getTime();   
  59.    xmlHttp.onreadystatechange=handleStateChange;   
  60.    xmlHttp.open("POST",url,false);              
  61.    xmlHttp.SetRequestHeader("Content-Type","application/x-www-form-urlencoded");              
  62.    xmlHttp.send(null);  
    

 

后台处理请求的代码：

  1. //写在所请求的URL页面的page_load下   
  2.         string email;    
  3.         email = Request.QueryString["email"];   
  4.         myCustomer.Email = email;   
  5.         if (email == string.Empty || email == null)   
  6.         {   
  7.             return;   
  8.         }   
  9.         else  
  10.         {   
  11.             StringBuilder result = new StringBuilder("<result>");   
  12.             if (myCheck.HaveCustomer(myCustomer))   
  13.             {   
  14.   
  15.                 result.Append("false");   
  16.                 result.Append("</result>");   
  17.                 Response.ContentType = "text/xml";   
  18.                 Response.Write(result.ToString());   
  19.                 Response.End();   
  20.             }   
  21.             else  
  22.             {   
  23.                 result.Append("true");   
  24.                 result.Append("</result>");   
  25.                 Response.ContentType = "text/xml";   
  26.                 Response.Write(result.ToString());   
  27.                 Response.End();   
  28.             }   
  29.         }  

 

XMLHttpRequest对象的属性

     XMLHttpRequest对象提供了许多属性，处理XMLHttpRequest时需要频繁用到这些属性，如下表所示：

 

 

属性

描述

onreadystatechange

每个状态改变时都会触发这个事件处理程序，通常会调用一个JavaScript函数

readyState

请求的状态

responseText

服务器的响应，表示为一个串

responseXML

服务器的响应，表示为XML，这个对象可以解析为一个DOM对象

status

服务器的HTTP状态

statusText

HTTP状态的对应文本

 

下面是属性和事件的详细说明

 

1. readyState属性

  当XMLHttpRequest对象吧一个HTTP请求发送到服务器时将经历若干种状态。一直等待直到请求被处理，然后，它才接收一个响应。这样以来，脚本才正确响应各种状态，XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性，如下表所示：

 

readyState取值

描述

0

描述一种“未初始化”状态。此时，已经创建了一个XMLHttpRequest对象，但是还没有初始化。

1

描述一种“发送”状态。此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

2

描述一种“发送”状态。此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。

3

描述一种“正在接收”状态。此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。

4

描述一种“已加载”状态。此时，响应已经被完全接收。

 

 

2. onreadystatechange属性

   无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值，向该方法指示无论readyState值何时发生改变，该对象都将激活。

3. responseText属性

   这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3（正在接收）时，响应中包含客户端还未完成的响应信息。当readyState为4（已加载）时，该responseText包含完整的响应信息。

4. responseXML属性

   此属性用于当接收到完整的HTTP响应时（readyState为4）描述XML响应；此时，Content-Type头部指定MIME（媒体）类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。

其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析（例如，如果文档不是良构的或不支持文档相应的字符编码），那么responseXML的值将为null。

5. status属性

   这个属性描述了HTTP状态代码，而且其类型为short。而且，仅当readyState值为3（正在接收中）或4（已加载）时，这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。例如：status等于200表示成功，404表示未找到资源。

 

状态码:描述  
100:Continue
101:Switching protocols
200:OK
201:Created
202:Accepted
203:Non-Authoritative Information
204:No Content
205:Reset Content
206:Partial Content
300:Multiple Choices
301:Moved Permanently
302:Found
303:See Other
304:Not Modified
305:Use Proxy
307:Temporary Redirect
400:Bad Request
401:Unauthorized
402:Payment Required
403:Forbidden
404:Not Found
405:Method Not Allowed
406:Not Acceptable
407:Proxy Authentication Required
408:Request Timeout
409:Conflict
410:Gone
411:Length Required
412:Precondition Failed
413:Request Entity Too Large

414:Request-URI Too Long
415:Unsupported Media Type 
416:Requested Range Not Suitable 
417:Expectation Failed 
500:Internal Server Error 
501:Not Implemented
502:Bad Gateway
503:Service Unavailable
504:Gateway Timeout 
505:HTTP Version Not Supported

6. statusText属性

   这个属性描述了HTTP状态代码文本，并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

 

 

XMLHttpRequest对象的方法

 

   下表显示了XMLHttpRequest对象的一些常用的方法，其中描述部分介绍了这些方法的作用和意义。

 

方法

描述

abort()

停止当前请求

getAllResponseHeaders()

把HTTP请求的所有相应首部作为键/值对返回。

getResponseHeader("header")

返回指定首部的串值。

open("method","url")

建立对服务器的调用。method参数可以是GET、POST或PUT等；url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数。

send(content)

向服务器发送请求。

setRequestHeader("header","value")

把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()方法。

 

 

 

方法：open
创建一个新的http请求，并指定此请求的方法、URL以及验证信息
语法：oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
参数
bstrMethod
http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。 
bstrUrl
请求的URL地址，可以为绝对地址也可以为相对地址。 
varAsync[可选]
布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。 
bstrUser[可选]
如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。 
bstrPassword[可选]
验证信息中的密码部分，如果用户名为空，则此值将被忽略。

备注：调用此方法后，可以调用send方法向服务器发送数据。
xmlhttp.Open("get", "http://localhost/example.htm", false);

方法：send
发送请求到http服务器并接收回应
语法：xmlhttp.send(varBody);
参数：varBody （欲通过此请求发送的数据。） 
备注：此方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync == False，此方法将会等待请求完成或者超时时才会返回，如果bAsync == True，此方法将立即返回。 
如果发送的数据为BSTR，则回应被编码为utf-8, 必须在适当位置设置一个包含charset的文档类型头。 
如果发送的数据为XML DOM object，则回应将被编码为在xml文档中声明的编码，如果在xml文档中没有声明编码，则使用默认的UTF-8。 
xmlhttp.Send(xmldoc);

方法：getAllResponseHeaders
获取响应的所有http头
语法：strValue = xmlhttp.getAllResponseHeaders();
备注：每个http头名称和值用冒号分割，并以rn结束。当send方法完成后才可调用该方法。 
alert(xmlhttp.getAllResponseHeaders());

 

方法：getResponseHeader
从响应信息中获取指定的http头
语法：strValue = xmlhttp.getResponseHeader(bstrHeader);
备注：当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml", 则这句话
xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。 
alert(xmlhttp.getResponseHeader("Content-Type")); // 输出http头中的Content-Type列：当前web服务器的版本及名称。

 

方法：abort
取消当前请求
语法：xmlhttp.abort();
备注：调用此方法后，当前请求返回UNINITIALIZED 状态。

 

方法：setRequestHeader
单独指定请求的某个http头
语法：xmlhttp.setRequestHeader(bstrHeader, bstrValue);
参数：bstrHeader（字符串，头名称。） bstrValue（字符串，值。） 
备注：如果已经存在已此名称命名的http头，则覆盖之。此方法必须在open方法后调用。
xmlhttp.setRequestHeader(bstrHeader, bstrValue);

maojh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js创建XMLHttpRequest对象池
03-18
NULL 博文链接：https://justsee.iteye.com/blog/690353
AJAX对象方法和对象属性
10-06
AJAX（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的...总的来说，理解和掌握AJAX中的XMLHttpRequest对象及其方法、属性，以及相关DOM操作函数，对于创建交互性强、用户体验良好的Web应用至关重要。
js产生 xmlhttp
echocdzh的博客
03-12 504
//产生XMLHTTP对象 var xmlhttp; function createXMLHttpRequest(){ try{ xmlhttp = new XMLHttpRequest(); }catch(e){ try{ xmlhttp = new Ac
Javascript创建XMLHttpRequest对象的3种方式
PursueCloud的博客
04-28 4594
XMLHttpRequest对象的创建
ajax原理，xmlHttpRequest
12-24
接下来，我们将详细了解`XMLHttpRequest`的各种属性和方法。 ##### 1. XMLHttpRequest对象的属性 - **`onreadystatechange`**：每当`readyState`发生变化时，都会触发此事件处理程序。 - **`responseText`**：从...
js_book_exercises：“使用JavaScript编程入门”中的练习
02-21
4. **对象与原型链**：JavaScript的对象是一种键值对的集合，可以通过属性和方法进行操作。原型链是理解JavaScript继承的关键。练习可能涉及构造函数、`this`关键字、原型对象（`.prototype`）和`Object.create()`。...
js101
03-10
JavaScript，简称JS，是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，是前端开发的核心技术之一。"js101"可能是一个初级的JavaScript学习资源或者课程，旨在帮助初学者掌握JavaScript的基础知识。在...
25-grupe-js-intro
03-17
6. **对象**：讨论JavaScript的对象表示法，包括属性和方法，以及如何创建和访问对象。 7. **字符串**：字符串的方法，如concat、substring、indexOf等，以及模板字符串的使用。 8. **事件和DOM操作**：如何通过...
创建XMLHttpRequest对象
09-26
创建XMLHttpRequest对象
XMLHTTPRequest的属性和方法简介
12-09
而设计AJAX时使用的一个重要的技术（工具）就是XMLHTTPRequest对象了。这里海啸把我学习XMLHTTPRequest对象的一点资料拿出来跟大家一起分享。文中的资料都是海啸在学习时在网上收集的，如果您开过，那就再加深下印象吧！（如果您觉得侵犯了您的版权，请联系海啸。（haixiao_yao[at]yahoo.com.cn）） 1、XMLHTTPRequest对象什么是？ 最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收 XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容
通过js代码创建XMLHTTPRequest对象
weixin_30871905的博客
06-10 109
最近在做一个网站，用到ajax，总结了用javascript代码创建XMLHTTPRequest对象，并且向一个一般处理程序发送请求并在客户端处理响应报文的代码， 代码如下： function createXmlHTTP() { var xhr = false; try {//ie浏览器 xhr = new Activ...
通过javaScript动态创建一个的request服务器请求,
古影轩
11-28 1228
(1).使用构造的request请求可以解决跨域的问题，而使用ifame也可以构造请求不过有时浏览器不支持iframe的跨域访问，所以大家在使用的时候就要根据自己的实际情况去选择应该使用那一种了  try{                    varscript_el=document.createElement("script");                    script_e
XMLHttpRequest对象创建和使用
Xi__Yuan的专栏
02-18 548
根据上一小节已经知道XMLHttpRequest是Ajax实现的基础，所有现代浏览器都支持并内建了XMLHttpRequest对象。我们下面就来看一下该对象的使用。 1、创建XMLHttpRequest对象         要实现异步操作首先就需要创建一个XMLHttpRequest对象，创建语法如下： var XHR = new XMLHttpRequest();         有了
Ajax学习系列——创建XMLHttpRequest对象
weixin_30346033的博客
03-08 58
Ajax - 创建XMLHttpRequest对象 首先介绍什么是XMLHttpRequest： XMLHttpRequest是Ajax的基础。中文可以解释为可扩展超文本传输请求。术语缩写为XHR。 XMLHttpRequest对象可以在不同服务器提交整个页面的情况下，实现局部刷新。 创建XMLHttpRequest对象： 现阶段主流浏览器（IE7+，Firefox，Googl...
js中的request
weixin_30617797的博客
10-10 374
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1...
js中XMLHttpRequest的基础用法,基础的ajax请求
你退后的地盘
06-30 301
步骤 创建对象 设置请求方式和请求地址 发送请求 获取数据 代码示例 // 创建对象 var http = new XMLHttpRequest(); // 设置请求方式，和请求地址 http.open('get', 'http://localhost/admin') // 发送请求 http.send(); // 接收服务器端返回的数据 http.onload = function () { // json字符串转换成对象 const res = JSON.parse(http
在Ajax中, XMLHttpRequest对象的常用方法和属性
最新发布
07-12
在Ajax中，XMLHttpRequest对象的常用方法和属性包括： 常用方法： 1. open(method, url, async)：初始化一个请求，指定请求的方法、URL和是否异步。 2. send(data)：发送请求，可选地传递数据给服务器。 3. abort()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值