<!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. 五、Android学习第四天补充——Android的常用控件（转）

    (转自:http://wenku.baidu.com/view/af39b3164431b90d6c85c72f.html) 五.Android学习第四天补充——Android的常用控件 熟悉常用的A ...

  2. 一个PHP混淆后门的分析

    洒家的朋友的公司的某个站发现最近被上传了一个后门程序.为了取证我们抓取了HTTP请求流量,看到了一堆莫名其妙看似经过混淆的请求,响应也是看似base64的乱码.洒家用了2个小时静态分析了一遍,并写了利 ...

  3. nodejs模块——Event模块

    Node.js中,很多对象会发出事件.如,fs.readStream打开文件时会发出一个事件. 所有发出事件的对象都是events.EventEmitter的实例,可以通过require(" ...

  4. jquery——彩色投票进度条

    一.需求 如下图 重点是要实现进度条. 二.分析 html5新增及删除标签一文中提到过html5新增了progress标签.但是肯定有兼容性问题.生成环境不适用,所以要模拟实现. 原理:动态设置< ...

  5. 笔记:html 拾遗之一

    html 拾遗之一 今天翻了下w3schools.com 把忘掉的语法记一下(仅常用但是不熟的部分) img alt 属性,当图片无法显示时可显示alt属性的文字 br 换行 < html la ...

  6. poj2486Apple Tree[树形背包!!!]

    Apple Tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9989   Accepted: 3324 Descri ...

  7. NOIP2015子串[序列DP]

    题目背景 无 题目描述 有两个仅包含小写英文字母的字符串 A 和 B.现在要从字符串 A 中取出 k 个互不重 叠的非空子串,然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一 个 ...

  8. 接入Google Play SDK

    更新 好消息:Unity5.3添加了google play.Mac .AppStore.windows store的IPA接口,我们做内购日后方便多啦!关于国内渠道的接入,推荐通用SDK平台,比如an ...

  9. 集合中Set接口与Collection接口，常用子类TreeSet，HashSet.

    Set接口与List接口的不同之处在于: 不允许有重复的数据. 定义如下: public interface Set<E>extends Collection<E> 主要方法与 ...

  10. win2008server R2 x64 部署.net core到IIS上出现【Failed to load the dll from [C:\Program Files\dotnet\host\fxr\1.0.1\hostfxr.dll], HRESULT: 0x80070057】错误

    win2008server R2 x64 部署.net core到IIS上出现[Failed to load the dll from [C:\Program Files\dotnet\host\fx ...