xmlhttprequest

来源：尊旭网时间：2024-03-02 02:53:44编辑：阿旭

怎样实现用ajax向服务器发送请求并接收服务器返回的数据，并在HTML页面的Table中显示？

比如服务器上有张表或者list
id name sex
1 张三男
2 李四女
3 王五男
你首先在后台代码中把这个表处理成为JSON格式然后用Response.write的方法输出来，比如这样
[{id:1,name:'张三',sex:'男'},{id:2,name:'李四',sex:'女'},{id:3,name:'王五',sex:'男'}]
JSON是用于在JS中描述实体对象的一种方式，具体关于JSON的知识可以看w3school.com.cn上的相关内容，我这儿就不给你细讲了，很简单，我只说做法：
为了方便使用，你需要在你的页面中引用jQuery库，我不知道你用什么语言做的后台程序，原理一样
$.ajax({
url:"这里换成你写好的用于把表转换成JSON的后台处理文件地址，比如a.aspx?参数",
type:"POST",//这里是AJAX请求的方式
dataType:"JSON",//如果你回发的内容是JSON格式的就用这个，否则用Text或其他
data:{
参数1:值,
参数2:值,
......
参数n:值
},//要发送的参数，如果无参数可以不写此项
success:function(data)
{
//此处写入发送成功后要处理的代码，而参数里的这个data，就是请求成功后返回来的上面那个格式的JSON，你可以用data[i]的值来取其中一行，如取张三的数据就是
data[0].name，就取出了张三的name属性
所以你可以在这里用循环去处理data，然后将结果用document.write的方式输出来就完成了。
},
error:function(XMLHttpRequest,Error,F)
{
//出错后可以在这里给出提示，Error参数表示错误信息
}
});
还有弄不清楚的地方可以继续和我探讨。

XMLHttpRequest是什么？？

1、XMLHTTPRequest对象什么是？

最通用的定义为：XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。（这个功能正是AJAX的一大特点之一）

来自MSDN的解释：XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象(MSXML2.XMLHTTP.3.0)向http服务器发送请求并使用微软XML文档对象模型Microsoft? XML Document Object Model (DOM)处理回应。

这里说些题外话，其实这个东西很早就出现了，只是以前浏览器的支持不够，只有IE中才支持，所以大多数的WEB程序员都没有怎么用他，但是现在情况发生了很大地改变，Mozilla和Safari把它采用为事实上的标准，主流的浏览器都开始支持XMLHTTPRequest对象了。但是这里需要重点说明的是XMLHTTPRequest目前还不是一个W3C的标准，所以在不同的浏览器上表现也稍有些区别。

2、创建XMLHTTPRequest对象

说到区别，我们这里来看看怎么来声明（使用）它，在使用XMLHTTPRequest对象发送请求和处理响应之前，我们必须要用javascript创建一个XMLHTTPRequest对象。（IE把XMLHTTPRequest实现为一个ActiveX对象，其他的浏览器[如Firefox/Safari/Opear]则把它实现为一个本地的javascript对象）。下面我们就来看看具体怎么运用javascript来创建它吧：

以下是引用片段：



3、属性和方法

由于东西太多现在先用个页面来列举出说有的方法和属性，以后再来详细举例（主要是本人也在学习中）。

XMLHTTPRequest对象的说明DEMO

<!--

var xmlhttp;

// 创建一个XMLHTTPRequest对象

function createXMLHTTPRequext(){

if(window.ActiveXObject) {

xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');

}

else if(window.XMLHTTPRequest){

xmlhttp = new XMLHTTPRequest();

}

}

function PostOrder(xmldoc)

{

createXMLHTTPRequext();

// 方法：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);

// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");

// alert(book.xml);

// 属性：onreadystatechange

// onreadystatechange：指定当readyState属性改变时的事件处理句柄

// 语法：oXMLHttpRequest.onreadystatechange = funcMyHandler;

// 如下的例子演示当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数，

// 当数据接收完毕后（readystate == 4）此页面上的一个按钮将被激活

// 备注：此属性只写，为W3C文档对象模型的扩展.

xmlhttp.onreadystatechange= HandleStateChange;

// 方法：send

// 发送请求到http服务器并接收回应

// 语法：oXMLHttpRequest.send(varBody);

// 参数：varBody （欲通过此请求发送的数据。）

// 备注：此方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync == False，此方法将会等待请求完成或者超时时才会返回，如果bAsync == True，此方法将立即返回。

// This method takes one optional parameter, which is the requestBody to use. The acceptable VARIANT input types are BSTR, SAFEARRAY of UI1 (unsigned bytes), IDispatch to an XML Document Object Model (DOM) object, and IStream *. You can use only chunked encoding (for sending) when sending IStream * input types. The component automatically sets the Content-Length header for all but IStream * input types.

// 如果发送的数据为BSTR，则回应被编码为utf-8, 必须在适当位置设置一个包含charset的文档类型头。

// If the input type is a SAFEARRAY of UI1, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type.

// 如果发送的数据为XML DOM object，则回应将被编码为在xml文档中声明的编码，如果在xml文档中没有声明编码，则使用默认的UTF-8。

// If the input type is an IStream *, the response is sent as is without additional encoding. The caller must set a Content-Type header with the appropriate content type.

xmlhttp.Send(xmldoc);

// 方法：getAllResponseHeaders

// 获取响应的所有http头

// 语法：strValue = oXMLHttpRequest.getAllResponseHeaders();

// 备注：每个http头名称和值用冒号分割，并以\r\n结束。当send方法完成后才可调用该方法。

alert(xmlhttp.getAllResponseHeaders());

// 方法：getResponseHeader

// 从响应信息中获取指定的http头

// 语法：strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);

// 备注：当send方法成功后才可调用该方法。如果服务器返回的文档类型为"text/xml", 则这句话

// xmlhttp.getResponseHeader("Content-Type");将返回字符串"text/xml"。可以使用getAllResponseHeaders方法获取完整的http头信息。

alert(xmlhttp.getResponseHeader("Content-Type")); // 输出http头中的Content-Type列：当前web服务器的版本及名称。

都在说HTML5，HTML5是什么概念

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation）。
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
设计目的
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：
· 新的解析规则增强了灵活性
· 新属性
· 淘汰过时的或冗余的属性
· 一个HTML5文档到另一个文档间的拖放功能
· 离线编辑
· 信息传递的增强
· 详细的解析规则
· 多用途互联网邮件扩展（MIME）和协议处理程序注册
· 在SQL数据库中存储数据的通用标准（Web SQL）
HTML5在2007年被万维网联盟(W3C)新的工作组采用。这个工作组在2008年1月发布了HTML 5的首个公开草案。眼下，HTML5处于“呼吁审查”状态，W3C预期它将在2014年年底达到其最终状态。

特性
语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
性能与集成特性（Class: Performance & Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

XMLHttpRequest对象有哪些属性

下面是XMLHttpRequest对象的一些方法和属性的简单介绍.
1.如何创建XMLHttpRequest
XMLHttpRequest并不是一个标准的产物,而是由微软最初提出并得到很多浏览器支持的对象,因此其创建方法也是因浏览器而异的.
2.readyState属性
readyState属性表示XMLHTTP请求的当前状态,当它等于4时表示请求已经完成.
3.status属性
status属性表示HTTP请求的返回状态码,因为XMLHTTP也是请求的一个网页,所以它的含义和传统网页相同,如:200表示正常返回,404表示找不到网页,500表示服务器内部错误.
4.responseText属性
在请求正常完成以后,responseText表示以文本形式返回请求页面的内容.
5.onreadystatechange事件
在XMLHttpRequest对象中readyState改变时将触发这个事件.
6.open方法
表示打开一个URL连接
7.setRequestHeader方法
在open方法后面调用,通过它设置HTTP头.
8.send方法
开始一个请求,如果是post请求,参数方面要提交到服务器的数据.

XMLHttpRequest对象发送请求后,请求的状态有几个值,每个值代表什么意思?

readyState
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：
状态名称描述
0 Uninitialized 初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1 Open open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2 Sent Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3 Receiving 所有响应头部都已经接收到。响应体开始接收但未完成。
4 Loaded HTTP 响应已经完全接收。

IE11提示:不能创建XmlHttprequest对象!浏览器不支持!

XHR 请求不携带 referer、X-Requested-With 等头部就会出现这个问题。可以更改的ActiveX 控件版本，操作方法如下：1、打开“管理加载项”：2、“加载类型”选择“工具栏和扩展”：3、“显示”选择“未经许可允许”：4、，在右侧找到“XML HTTP 3.0” 禁用即可扩展资料：所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。创建 XMLHttpRequest 对象的语法：xmlhttp=new XMLHttpRequest();老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

form表单提交数据和XMLHttpRequest的区别

使用AJAX技术，ajax就是不需要用表单来提交，它使用XMLHttpRequest对象把一些需要非FORM表单信息保存到后台，然后再发往服务器，最后从服务器端接收返回过的数据，在使用DOM技术把需要显示的数据更新到当前的页面的某个指定的区域，从而实现了在不刷新页面的情况下更新了新的数据，注意，，从获取数据--发送数据--接收数据--动态更新页面内容,整个过程都不会刷新页面。
而服务器端的数据处理，最好不要基于cookie来编程，因为有些客户的cookie是禁用掉的，这时我们应该要想到session，当客户禁用掉cookie的情况下，我还可以使用response对象的URL重写方法来达到COOKIE的ID号只有一个。不过我建议最好使用APPlocation对象，

XMLHttpRequest对象的status属性状态吗

jquery ajax的readyState和status的区别和使用

readyState表示XMLHttpRequest对象的处理状态：
0:XMLHttpRequest对象还没有完成初始化。(准备司机、车、货物)
1:XMLHttpRequest对象开始发送请求。(需要送十车货物，当前正在送第几车)
2:XMLHttpRequest对象的请求发送完成。(十车货送完毕)
3:XMLHttpRequest对象开始读取服务器的响应。(准备把这十车加工的货拉回来，当前第几车)
4:XMLHttpRequest对象读取服务器响应结束。(十车货全部拉回完毕)
status状态：
1xx:信息响应类，表示接收到请求并且继续处理。(所有拉去的货，工厂还没有加工完毕)
2xx:处理成功响应类，表示动作被成功接收、理解和接受。。(所有拉去的货工厂全部加工完毕)
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理。(所有拉去的货，工厂设备不够，让其他工厂帮忙加工)
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行。(这十车货有质量问题，工厂不能正常加工)
5xx:服务端错误，服务器不能正确执行一个正确的请求。(工厂在加工到一半过程中断电，不能继续加工)

上一篇：xiqu

下一篇：没有了