<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>修改内容</title>

     <!--

     所有现代浏览器均支持XMLHttpRequest对象（IE6 IE5使用ActiveXObject）

     XMLHttpRequest用于在后台与服务器交换数据，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

     创建XMLHttpRequest对象

     IE7+  FireFox   chrome   Opera Safari

      xmlhttp = new XMLHttpRequest();

      IE5 IE6

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

     -->

     <script>

         function loadXMLDoc() {

             var xmlhttp;

             if (window.XMLHttpRequest) {

                 //code for IE7+  FireFox   chrome   Opera Safari

                 xmlhttp = new XMLHttpRequest();

             } else {

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

             }

             /**

              * 当使用async=true时，请规定在想赢处于onreadystatechange事件中的就绪状态时执行的函数

              * 如果async=false时就不必使用onreadystatechange函数，将代码放到send()语句之后即可

              * xmlhttp.open("GET","ajax_info.txt",false);

              *xmlhttp.send();

              *document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

              * */

             xmlhttp.onreadystatechange = function () {

                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                     document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

                 }

             }

             //open(method,url,async):

             //method :规定请求的类型 GET或POST

             //url : 文件在服务器上的位置

             //async:true为异步  false为同步

             xmlhttp.open("GET", "../ajax_info.txt", true);

             //send(string)将请求发送到服务器  带有string参数的仅用于POST请求

             /**

              * 与POST想比GET更简单也更快，并且在大部分情况下都能使用

              * 然而在以下情况下请使用POST请求：

              * 无法使用缓存文件（更新服务器上的文件或数据库）

              * 向服务器发送大量数据（POST没有数据量限制）

              * 发送包含未知字符的用户输入时POST比GET更稳定也更可靠

              * 使用POST请求时如果需要HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头然后在send()方法中规定希望发送的数据

              * xmlhttp.open("POST","ajax_test.html",true);

              *xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

              *xmlhttp.send("fname=Henry&lname=Ford");

              * sendRequestHeader(header,value) header:规定头的名称   value：规定头的值

              *

              * */

             xmlhttp.send();

         }

     </script>

 </head>

 <body>

 <div id="myDiv">

     <h2>使用Ajax修改该文本的内容</h2>

 </div>

 <button type="button" onclick="loadXMLDoc()">修改内容</button>

 </body>

 </html>

[AJAX系列]XMLHttpRequest请求的更多相关文章

  1. Egret和Http请求 (Ajax、XMLHttpRequest、Post、Get)

    一  Http请求 二  AJax和XMLHttpRequest 三  一个Ajax例子 四 Egret中的egret.HttpRequest 五 Post和Get区别 一 Http请求 Http深入 ...

  2. ajax 请求二进制流 图片 文件 XMLHttpRequest 请求并处理二进制流数据 之最佳实践

    写在前面 :从提出需求到完美的解决问题,实现过程是曲折的. 需求:在前(web client)后(Restful Service)端完全解耦的模式框架下,webclient需要请求 Service 返 ...

  3. ajax系列之用jQuery的ajax方法向服务器发出get和post请求

    打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个 ...

  4. AJAX（XMLHttpRequest）进行跨域请求方法详解（三）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 3,带验证信息的请求 身份验证是Web开发中经常遇到的问题,在跨 ...

  5. AJAX（XMLHttpRequest）进行跨域请求方法详解（二）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 2,预检请求 预检请求首先需要向另外一个域名的资源发送一个 HT ...

  6. AJAX（XMLHttpRequest）进行跨域请求方法详解（一）

    注意:以下代码请在Firefox 3.5.Chrome 3.0.Safari 4之后的版本中进行测试.IE8的实现方法与其他浏览不同. 跨域请求,顾名思义,就是一个站点中的资源去访问另外一个不同域名站 ...

  7. AJAX（XMLHttpRequest）进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

  8. js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）

    js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...

  9. js系列教程11-json、ajax（XMLHttpRequest）、comet、SSE、WebSocket全解

    js系列教程11-json.ajax(XMLHttpRequest).comet.SSE.WebSocket全解:https://blog.csdn.net/luanpeng825485697/art ...

随机推荐

  1. linux添加开机自启动脚本示例详解

    linux下(以RedHat为范本)添加开机自启动脚本有两种方法,先来简单的; 一.在/etc/rc.local中添加如果不想将脚本粘来粘去,或创建链接什么的,则:step1. 先修改好脚本,使其所有 ...

  2. 浅谈C++设计模式之单例模式

    单例模式:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 通常我们可以让一个全局变量使得一个对象被访问,但它不能防止客户实例化多个对象,一个最好的办法就是让类自身负责保护它的唯一实例,这个类可 ...

  3. How to create and apply a patch with Git

    Creating a patch file with git is quite easy to do, you just need to see how it’s done a few times. ...

  4. golang和vim-go安装配置

    一.Golang安装 1.下载golang安装包http://golangtc.com/download,我这里下载的是go1.6rc2.linux-amd64.tar.gz. 2.解压到安装目录,我 ...

  5. 【转】XPath 示例

    XPath 示例   其他版本   本主题回顾整个 XPath 参考中出现的语法示例. 所有示例均基于 XPath 语法的示例 XML 文件 (inventory.xml). 有关在测试文件中使用 X ...

  6. 理解 Linux 网络栈（3）：QEMU/KVM + VxLAN 环境下的 Segmentation Offloading 技术（发送端）

    本系列文章总结 Linux 网络栈,包括: (1)Linux 网络协议栈总结 (2)非虚拟化Linux环境中的网络分段卸载技术 GSO/TSO/UFO/LRO/GRO (3)QEMU/KVM + Vx ...

  7. cdoj 1489 老司机采花

    地址:http://acm.uestc.edu.cn/#/problem/show/1489 题目: 老司机采花 Time Limit: 3000/1000MS (Java/Others)     M ...

  8. android代码优化----ListView中自定义adapter的封装（ListView的模板写法）

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...

  9. ADO.Net 增、删、改、查（基本项）

    数据访问 对应命名空间:System.Data.SqlClient; SqlConnection:连接对象 SqlCommand:命令对象 SqlDataReader:读取器对象 CommandTex ...

  10. SQL部分 数据库的建立 增删改查

    数据库: 结构化查询语言(Structured Query Language)简称SQL: 数据库管理系统(Database Management System)简称DBMS: 数据库管理员(Data ...