XMLHttpRequest对象。能够让ajax程序在不又一次载入的页面的情况下更新页面数据,页面载入完毕后从server接受发生数据。这样既减轻了server负担又回顾了响应速度,缩短了用户的等待时间,让web程序更类似于传统的桌面应用。

XMLHttpRequest对象4步用法:

1.建立XMLHttpRequest对象。

建立XMLHttpRequest对象时,要依据浏览器的不同版本号去建立,由于IE5.0和iE6.0,开发者就能够在WEB页面内部使用XMLHTTP ActiveX组件扩展自身的功能;而从IE7版本号以上以及其它厂商的浏览器,開始创建继承XML的代理类XMLHttpRequest。所以创建上会有不同。

         var xmlhttp;//定义全局变量   
<span style="white-space:pre">    </span>//1.创建xmlhttprequest对象if (window.XMLHttpRequest) {//firefox等其它浏览器、ie7、8及以上版本号适用xmlhttp = new XMLHttpRequest();if (xmlhttp.overrideMimeType) {xmlhttp.overrideMimeType("text/xml");} else if (window.ActiveXObject) {//ie5、6版本号版本号适用var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];for (var i = 0; i < activexName.length; i++) {try {xmlhttp = new ActiveXObject(activexName[i]);break;} catch (e) {}}}if (xmlhttp==undefined || xmlhttp==null) {alert("当前浏览器不支持创建xmlhttprequest对象");return;}

2.注冊回调函数

                //2.注冊一个回调方法xmlhttp.onreadystatechange = callback;

3.使用open方法设置和server交互的信息,并设置发送的数据,

open方法中的也有get和post的提交方式。post的方式时。要设置它的头文件,而且须要发送时须要将參数写的send中

                //GET方式交互//3.设置和server交互的对应參数xmlhttp.open("GET", "HtmlPage1.ashx?

username=" + userName, true); 设置server端发送的数据。

启动和server的交互 xmlhttp.send(null);

                //POST方式交互//3.利用open。设置和server交互的对应參数xmlhttp.open("POST", "HtmlPage1.ashx", true);xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");              //POST方式所须要添加的代码,头文件//设置server端发送的数据。启动和server的交互。以及传递參数xmlhttp.send("username=" + userName);

4.在回调函数中推断交互是否完毕。响应是否正确。并依据须要获取server端返回的数据。更新页面内容。

                //回调函数function callback(){//5.推断和server器的交互是否完毕,server端是否正确返回了数据if (xmlhttp.readyState == 4) {//表示server端的交互已经完毕if (xmlhttp.status == 200) {//表示正确的返回了数据//纯文本的方法接受方法var message = xmlhttp.responseText;//xml数据相应的dom对象的接受方法//使用的前提是,server端须要设置//记忆向div标签中加入文本内容var div1 = document.getElementById("message");div1.innerHTML = message;}}}

XMLHttpRequest的具体属性和方法:

open() 指定server端交互的http方法(post or get)、url地址、是否异步等信息
send() 向server发出请求,假设採用异步,该方法马上返回,其内容能够是null。dom对象。输入流,字符串
setRequestjeader() 设置http的头文件,在open方法以后调用。
getallResponseHeaders() 包括http的全部对应头文件信息。
getResponseHeader() 返回http相应头文件里指定的键名header相应值。
abort() 停止当前http请求,相应的xmlhttprequest对象复位到未初始化的状态
readyState 异步操作的状态:未初始化(0),正在载入(1),已载入(2),交互(3)。已完毕(4)
onreadystatechange() 请求状态改变的事件触发器。

(可注冊函数)

responseText server响应的文本内容。
responseXML server响应的XML内容相应的DOM对象
status server返回的HTTP状态码。200成功。
statusText server返回状态码的文本信息

总结:

在Ajax应用程序中,XMLHttpRequest对象负责将用户信息以异步通信地发送到server端,并接收server响应信息和数据。

ajax——XMLHttpRequest相关推荐

  1. 原生ajax XMLHTTPRequest()

    原生ajax XMLHTTPRequest() 视频 https://www.bilibili.com/video/BV1WC4y1b78y?p=10 代码 <!DOCTYPE html> ...

  2. java ajax报错500,(Struts2+JSON+Ajax) XMLHttpRequest ==500如何解决

    (Struts2+JSON+Ajax) XMLHttpRequest ==500怎么解决? 本帖最后由 zjlisok 于 2013-01-29 02:00:05 编辑 XMLHttpRequest. ...

  3. php ajax xmlhttpreq 上传文件 get,使用Ajax XmlHttpRequest上传文件

    使用Ajax XmlHttpRequest上传文件 嗨,我正在尝试使用此代码发送带有xmlhttprequest的文件. var url= "http://localhost:80/.... ...

  4. ASP.NET MVC中使用AJAX(XMLHttpRequest、Microsoft AJAX Library......)

    AJAX的好处就是不会堵塞页面,可以提高用户体验,可以减少数据传输尺寸,提高应用程序的性能.目前,AJAX技术可以说是已经成为WEB开发的标准技术. AJAX技术是纯客户端技术,任何客户端框架(如:M ...

  5. ajax(判断浏览器创建xmlhttprequest对象),XMLHTTPRequest对象的创建与浏览器的兼容问题...

    MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest ...

  6. ajax跨域请求 xml,XMLHttpRequest的跨域请求

    动态添加一个标签,而script标签的src属性是没有跨域的限制的.这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了. 这样其实"jQuery AJAX跨域问题& ...

  7. Ajax跨域:Jsonp原理解析

    推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...

  8. JQuery实现Ajax跨域访问--Jsonp原理

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...

  9. 前端开发的开始---基于OO的Ajax类

    一年都没写过博客了,不是懒,是不知有啥好写的...现在本人从一个后台开发.net的转向前端开发了... 之前去面试的时候,给面试官问过,有没有属于自己的ajax类,当时很奇怪,因为我基本上ajax开发 ...

最新文章

  1. 会计师要计算机学的,会计师要具备哪些能力条件
  2. 云原生产业联盟成立 蚂蚁金服当选为理事单位
  3. 零元学Expression Blend 4 ndash; Chapter 21 以实作案例学习MouseDragElementBehavior
  4. qt为窗体部件设置阴影、类似日晕效果
  5. gRPC官方快速上手学习笔记(c#版)
  6. 计算机如何学会自动地进行图像美学增强?
  7. oracle数据库支持2颗cpu,2.3 Oracle数据库中常见的性能问题
  8. 线程学习3——前台线程和后台线程
  9. Qt笔记-拖动文件到QWidget(获取拖动文件路径)
  10. Springboot启动报错Error handling failed
  11. python enumerate() 函数的使用方法
  12. JAVA代码编译流程
  13. # 研究杂感 × VOSviewer(第二辑)
  14. SAP 根据excel模板导入并批量生成销售订单
  15. 反射系数、驻波比、S参数之间的关系!
  16. 小黄鸟(HTTPCanary)安装及Android高版本CA证书配置
  17. Java--多线程之并发,并行,进程,线程(一)
  18. 高数下|级数4|手写笔记(绝对收敛与条件收敛)
  19. 求大家别秀智商了:请给我一面国旗 @微信官方
  20. 【JS】通过JS实现超市小票打印功能——ActiveX控件

热门文章

  1. 自己对Delphi中使用正则表达式的研究心得
  2. micro hdmi引脚定义义_臻实力芯定义:京东AMD笔记本电脑双11开门红-AMD笔记本 ——快科技(驱动之家旗下媒体)-...
  3. Wireshark如何选择多行
  4. ​OpenVAS漏洞扫描基础教程之创建用户组与创建角色
  5. 中兴核心网服务器笔记本电脑,中兴通讯5G Common Core
  6. .net ticks 转java_《C#并发编程经典实例》—— 转换.NET事件
  7. axios设置text html,axios封装动态设置Content-Type
  8. java 集合 介绍_java集合类基本简介
  9. 霍夫变换检测圆c 语言,c – 使用Hough变换检测圆
  10. #中的引用型是什么意识_excel的vlookup函数经常引用错误,让我告诉你原因,迅速脱离误区...