AJAX入门---五步使用XMLHttpRequest对象

原文

XMLHttpRequest简介：

XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

五步使用XMLHttpRequest对象

1． 建立XMLHttpRequest对象如下：

（不同浏览器中XMLHttpRequest对象建立的方式不同：IE7以上，FireFox，Safari，Opera等中直接newXMLHttpRequest()；IE6，IE5.5等则需要通过用一个正确的ActiveXObject控件名称通过new ActiveXObject(控件名)的方式）

[javascript] view plain copy print ?
  1. if (window.XMLHttpRequest) {
  2. xmlhttp=new XMLHttpRequest();
  3. if (xmlhttp.overrideMimeType) {
  4. xmlhttp.overrideMimeType("text/xml");
  5. }
  6. }else if (window.ActiveXObject) {
  7. var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",
  8. "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",
  9. "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];
  10. for (var i = 0; i <activexName.length; i++) {
  11. try {
  12. xmlhttp=new ActiveXObject(activexName[i]);
  13. } catch (e) {
  15. }
  16. }
  17. }

2． 注册回调函数

（设置回调函数是，不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性）

[javascript] view plain copy print ?
  1. xmlhttp.onreadystatechange=callback;

3． 使用open方法设置服务器端交互的基本信息

（open方法最多有五个参数局，其中头三个参数是必须的）

[javascript] view plain copy print ?
  1. //使用GET方式时，请求数据位于url链接中，后面的send方法的参数直接写null
  2. xmlhttp.open("GET","Ajax?name="+ userName,true );
  4. //使用POST方式时，open方法后面需要先调用setRequestHeader方法，来设置Content-Type的值，然后调用send方法，send的参数就是请求的数据
  5. xmlhttp.open("POST","Ajax",true);
  6. xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

4． 设置发送的数据，开始和服务器端交互

[javascript] view plain copy print ?
  1. //GET方式
  2. xmlhttp.send(null);
  4. //POST方式
  5. xmlhttp.send("name=" + userName);

5． 在回调函数中判断交互是否结束，响应是否正确，并根据需要获取服务器端返回的数据，更新页面的内容

（回调函数中，最好将判断readyState和status的两个if条件，分开来写）

[javascript] view plain copy print ?
  1. function callback(){
  2. //5.判断和服务器端的交互是否完成，还要判断服务器端是否正确返回了数据
  3. if (xmlhttp.readyState == 4) {
  4. //表示和服务器端的交互已经完成
  5. if (xmlhttp.status==200) {
  6. //表示和服务器的响应代码是200，正确的返回了数据
  7. //纯文本数据的接受方法
  8. var message =xmlhttp.responseText;
  9. //Xml数据对应的Dom对象的接受方法
  10. //使用的前提是，服务器端需要设置content-type为text/xml
  11. //var DomXML=xmlhttp.responseXML;
  14. //向div标签中填充文本内容的方法
  15. var div=document.getElementById("message");
  16. div.innerHTML=message;
  17. }
  18. }
  19. }

总结：

当然通过这个小小的例子，我们只能说是经历了一个从不知道到知道的过程，初步了解了一下XMLHttpRequest对象的用法，更加深刻的理解还需要我们更加深入的学习和在实践中加以利用。

AJAX入门---五步使用XMLHttpRequest对象的更多相关文章

  1. 详解使用postMessage解决iframe跨域通信问题

    这篇文章主要介绍了详解使用postMessage解决iframe跨域通信问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  2. 有没有办法知道购买哪个iTunes帐户？ – iOS

    我的应用程序提供应用内购买非消耗类型.该应用程序具有登录功能.是否可以根据登录用户购买我的应用程序？

  3. ios – Apple应用程序内购买收据 – 在服务器端验证

    我想验证它,并确保这是独一无二的.我担心的是：如果有人会收到一张有效收据,他就可以破解我们的服务器端API,并使用相同的有效收据进行无限数量的应用内购买.我应该以某种方式解密并检查transaction_id的“原始”收据,即我发送给Apple进行验证的收据？

  4. ios – 服务器端接收验证失败时是否应该调用finishTransaction？

    我们应该调用finishTransaction吗？这导致无效的交易永远活在队列中？就像在这个问题上说的那样：iPhonein-apppurchase:receiptverificationButifyoufindoutthatareceiptisinvalid,youshouldfinishtheassociatedtransaction.Ifnot,youmayhaveextra-transactionslivingforeverinthetransactionqueue.Thatmeansthatea

  5. 应用程序关闭时的iOS任务

    我正在构建一个应用程序,通过ajax将文件上传到服务器.问题是用户很可能有时不会有互联网连接,并且客户希望在用户重新连接时安排ajax调用.这可能是用户在离线时安排文件上传并关闭应用程序.应用程序关闭时可以进行ajax调用吗？

  6. swift开发笔记9 － 正向和反向页面传参

    在storyboa里segue是这样的：首先看考勤页面（主页面）如何给备注页面传参：在考勤页面（主页面）的viewcontroller中找到prepareForSegue方法，这个方法由xcode自动生成，用于在使用segue跳转前，做一些处理动作：实际上是通过修改segue的目标页面的某个类属性，从而达到传参的目的。

  7. Project Perfect让Swift在服务器端跑起来－引言一

    你认识Swift或者是在客户端，因为它是苹果用来开发客户端的新一代语言。可以说Swift已经是一个完整的跨平台语言了。Perfect让Swift在服务器端跑起来了，它是开源的。添加完后你打开Xcode就可以看到Perfect模版了。PerfectLib你可以理解成Perfect框架，而PerfectServer是启动支持Perfect的类似IIS/Apache的容器，MysqL是需要介入MysqLConnector5.利用Perfect模版创建PerfectWeb项目,如图我创建了一个HelloWorld

  8. [快速学会Swift第三方库] Kingfisher篇

    [快速学会Swift第三方库]Kingfisher篇Kingfisher是一个轻量的下载和缓存网络图片库。也可以利用kf_setimageWithURL函数的返回值来进行更多的管理操作下载器自定义下载器参数缓存系统自定义缓存参数预取将一些图片在显示到屏幕上之前，先预取到缓存。动态图片加载动态图片只需要加上一行代码，设置imageView为AnimatedImageView，不设置也能加载，但是在动态图片较大的时候推荐进行该设置。深入学习这里列出了Kingfisher大多数操作，如果想要深入学习Kingfi

  9. swift - 回调

    回调函数B不由该函数的实现方A直接调用，而是在特定的事件或条件发生时由另外的一方C调用，用于对该事件或条件进行响应。在swift中有同步和异步两种形式的回调函数：同步回调函数异回调函数步C调用方法B，B可以是函数或者closureC调用函数B并使B在另一线程上运行B返回之前C处理block状态B和C运行在不同的线程，不会互相block。

  10. 6.3 Swift闭包表达式作为回调函数

    /**闭包表达式作为回调函数*//**上节课中呢，说了闭包表达式的语法，将闭包表达式赋给一个常量并不常用，那种调用方式还不如就写成函数的形式*/vararray=[20,2,3,70,8]showArrayprintbubbleSortletintCmp={->Intin//可以修改闭包表达式//letx=a%10//lety=b%10ifa>b{return-1}elseifaIntin//可以修改闭包表达式letx=a%10lety=b%10ifx>y{return-1}elseifxVoid{for

随机推荐

  1. xe-ajax-mock 前端虚拟服务

    最新版本见Github，点击查看历史版本基于XEAjax扩展的Mock虚拟服务插件；对于前后端分离的开发模式，ajax+mock使前端不再依赖后端接口开发效率更高。CDN使用script方式安装，XEAjaxMock会定义为全局变量生产环境请使用xe-ajax-mock.min.js，更小的压缩版本，可以带来更快的速度体验。

  2. vue 使用 xe-ajax

    安装完成后自动挂载在vue实例this.$ajaxCDN安装使用script方式安装，VXEAjax会定义为全局变量生产环境请使用vxe-ajax.min.js，更小的压缩版本，可以带来更快的速度体验。cdnjs获取最新版本点击浏览已发布的所有npm包源码unpkg获取最新版本点击浏览已发布的所有npm包源码AMD安装require.js安装示例ES6Module安装通过Vue.use()来全局安装示例./Home.vue

  3. AJAX POST数据中文乱码解决

    前端使用encodeURI进行编码后台java.net.URLDecoder进行解码编解码工具

  4. Koa2框架利用CORS完成跨域ajax请求

    实现跨域ajax请求的方式有很多，其中一个是利用CORS，而这个方法关键是在服务器端进行配置。本文仅对能够完成正常跨域ajax响应的，最基本的配置进行说明。这样OPTIONS请求就能够通过了。至此为止，相当于仅仅完成了预检，还没发送真正的请求呢。

  5. form提交时，ajax上传文件并更新到&lt;input&gt;中的value字段

  6. ajax的cache作用

    filePath="+escape;},error:{alert;}});解决方案：1.加cache:false2.url加随机数正常代码：网上高人解读：cache的作用就是第一次请求完毕之后，如果再次去请求，可以直接从缓存里面读取而不是再到服务器端读取。

  7. 浅谈ajax上传文件属性contentType = false

    默认值为contentType="application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。在这里，我们主要谈谈contentType=false.在使用ajax上传文件时：在其中先封装了一个formData对象，然后使用post方法将文件传给服务器。说到这，我们发现在JQueryajax()方法中我们使contentType=false,这不是冲突了吗？这就是因为当我们在form标签中设置了enctype=“multipart/form-data”,

  8. 909422229_ajaxFileUpload上传文件

    ajaxFileUpload.js很多同名的，因为做出来一个很容易。我上github搜AjaxFileUpload出来很多类似js。ajaxFileUpload是一个异步上传文件的jQuery插件传一个不知道什么版本的上来，以后不用到处找了。语法：$.ajaxFileUploadoptions参数说明：1、url上传处理程序地址。2，fileElementId需要上传的文件域的ID，即的ID。3，secureuri是否启用安全提交，默认为false。4，dataType服务器返回的数据类型。6，error

  9. AJAX-Cache：一款好用的Ajax缓存插件

    原文链接AJAX-Cache是什么Ajax是前端开发必不可少的数据获取手段，在频繁的异步请求业务中，我们往往需要利用“缓存”提升界面响应速度，减少网络资源占用。AJAX-Cache是一款jQuery缓存插件，可以为$.ajax()方法扩展缓存功能。

  10. jsf – Ajax update/render在已渲染属性的组件上不起作用

    我试图ajax更新一个有条件渲染的组件。我可以确保#{user}实际上是可用的。这是怎么引起的，我该如何解决呢？必须始终在ajax可以重新呈现之前呈现组件。Ajax正在使用JavaScriptdocument.getElementById()来查找需要更新的组件。但是如果JSF没有将组件放在第一位，那么JavaScript找不到要更新的内容。解决方案是简单地引用总是渲染的父组件。

返回
顶部