步骤：

/* 用XMLHTTPRequest来进行ajax异步数据交交互*/

主要有几个步骤：

//1.创建XMLHTTPRequest对象

//最复杂的一步

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修正。
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
};
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

2.注册回调函数

xmlhttp.onreadystatechange = callback;

//3.设置连接信息。
//open第一个参数链接方式，第二是url地址
//3，true是异步链接
//xmlhttp.open("GET","xhr.php?name=" + username,true);

//使用post方式发送数据
xmlhttp.open("POST","xhr.php",true);

//post需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//4，发送数据，开始和服务器进行交互
//中如果true, send这句话会立即执行
//如果是false（同步），send会在服务器数据回来才执行
//xmlhttp.send(null);
//因为是get所以send中不需要内容
xmlhttp.send('name=' +username);

}
//5.写回调函数,不同相应状态进行处理

function callback(){
alert(xmlhttp.readyState);
//判断对象状态是交互完成，接收服务器返回的数据
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//["dada","xiaoyin","liujie"]
//纯文本的数据
var responseText = xmlhttp.responseText;
var divNode = document.getElementById('result');
//6.将服务器的数据显示在客户端
divNode.innerHTML = responseText;
}
}

代码：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>XHR</title>

     <link rel="stylesheet" href="../templates/css/verify.css">

 </head>

 <body>

     <input type="text" id="username"><input type="button" value="提交" onclick="dadaHttpRequest()">

     <div class="box" id="box"></div>

         <script type="text/javascript" src="../templates/js/jquery.js"></script>

         <script>

         /* 用XMLHTTPRequest来进行ajax异步数据交交互*/

         //1.创建XMLHTTPRequest对象

         var xmlhttp;

         //最复杂的一步

         function dadaHttpRequest(){

             var username = document.getElementById('username').value;

             if (window.XMLHttpRequest) {

                 // code for IE7+, Firefox, Chrome, Opera, Safari

                 xmlhttp = new XMLHttpRequest;

                 //针对某些特定版本的mozillar浏览器的bug进行修正。

                 if (xmlhttp.overrideMimeType) {

                       xmlhttp.overrideMimeType('text/xml');

                 };

             } else if (window.ActiveXObject){

                 // code for IE6, IE5

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

             };

             //2.注册回调函数

             //onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数。

             xmlhttp.onreadystatechange = callback;

             //3.设置连接信息

             //初始化HTTP请求参数，但是并不发送请求。

             //第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步

             xmlhttp.open("GET","xhr.php?name="+username,true);

             /*******************************************/

             /*如果是xmlhttp.open("GET","xhr.php",true);*/

             /*    xmlhttp.send('name=' +username);     */

             /*    不行的                               */

             /*******************************************/

             //使用post方式发送数据

             //xmlhttp.open("POST","xhr.php",true);

             //post需要自己设置http的请求头

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

             //4，发送数据，开始和服务器进行交互

             //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。

             //中如果true, send这句话会立即执行

             //如果是false（同步），send会在服务器数据回来才执行

             xmlhttp.send(null);

             //因为是get所以send中不需要内容

             //xmlhttp.send('name=' +username);

         }

         //5回调函数,不同相应状态进行处理

         function callback(){

             //alert(xmlhttp.readyState);

             //判断对象状态是交互完成，接收服务器返回的数据

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

                 {

                 //["dada","xiaoyin","liujie"]

                 //纯文本的数据

                 var responseText = xmlhttp.responseText;

                 var divNode = document.getElementById('box');

                 //6.将服务器的数据显示在客户端

                 divNode.innerHTML = responseText;

                 }

         }

         </script>

 </body>

用js内置对象XMLHttpRequest 来用ajax的更多相关文章

  1. 4月5日--课堂笔记--JS内置对象

    JavaScript 4.5 一.    JS内置对象 1.数组Array a)创建语法1:var arr=new Array(参数); i.       没有参数:创建一个初始容量为0的数组 ii. ...

  2. JS内置对象有哪些？

    JS内置对象分为数据封装类对象和其他对象 数据封装类对象:String,Boolean,Number,Array,和Object; 其他对象:Function,Arguments,Math,Date, ...

  3. JS内置对象-String对象、Date日期对象、Array数组对象、Math对象

    一.JavaScript中的所有事物都是对象:字符串.数组.数值.函数... 1.每个对象带有属性和方法 JavaScript允许自定义对象 2.自定义对象 a.定义并创建对象实例 b.使用函数来定义 ...

  4. 5月15日上课笔记-js中 location对象的属性、document对象、js内置对象、Date事件对象、

    location的属性: host: 返回当前主机名和端口号 定时函数: setTimeout( ) setInterval() 二.document对象 getElementById(); 根据ID ...

  5. JS内置对象的原型不能重定义？只能动态添加属性或方法？

    昨天马上就快下班了,坐在我对面的同事突然问我一个问题,我说“爱过”,哈哈,开个玩笑.情况是这样的,他发现JS的内置对象的原型好像不能通过字面量对象的形式进行覆盖, 只能动态的为内置对象的原型添加属性或 ...

  6. js课程 3-9 js内置对象定时器和超时器怎么使用

    js课程 3-9 js内置对象定时器和超时器怎么使用 一.总结 一句话总结:定时器:    1.定义    sobj=setInterval(func,1000);        2.清除    cl ...

  7. js课程 2-8 js内置对象有哪些

    js课程 2-8 js内置对象有哪些 一.总结 一句话总结:JS中内置了17个对象,常用的是Array对象.Date对象.正则表达式对象.string对象.Global对象. 1.js常用对象有哪些? ...

  8. JS 内置对象 String对象

    JS内置对象   String对象:字符串对象,提供了对字符串进行操作的属性和方法.   Array对象:数组对象,提供了数组操作方面的属性和方法.   Date对象:日期时间对象,可以获取系统的日期 ...

  9. web前端学习（四）JavaScript学习笔记部分（6）-- js内置对象

    1.JS内置对象-什么是对象 1.1.什么是对象: JavaScript中的所有事物都是对象:字符串.数值.数组.函数 每个对象带有属性和方法 JavaScript允许自定义对象 1.2.自定义对象: ...

随机推荐

  1. Spring MVC手札

    本文用于记录使用Spring MVC中的零散手札 1.在普通java类中获取HttpServletRequest对象  在web.xml的listener节点加入 <listener> & ...

  2. ActiveMQ的消息存储方式

    1. 队列存储        采取先进先出模式,同一时间,消息只会发送给某一个消费者,只有当该消息被消费并告知已收到时,它才能在代理的存储中被删除.        对于持久性订阅来说,每一个消费者都会 ...

  3. Springboot @webfilter @order filter过滤器

    我们使用@WebFilter注解的时候发现注解里面没有提供可以控制执行顺序的参数 @WebFilter 的属性 属性名 类型 描述 filterName String 指定过滤器的 name 属性,等 ...

  4. Layui：设置select下拉框自动选中某项

    1.问题:layUI,在做编辑功能有下拉框数据时,需要初始化选中某个值,layUI官网没有相关api,可能我比较笨没找到 2.解决思路:出发点击事件 3.分析dom树结构,出发dl点击事件 方法: v ...

  5. 5 -- Hibernate的基本用法 -- 要点

    Hibernate的基本用法 ⊙ ORM的基本知识 ⊙ ORM和Hibernate的关系 ⊙ Hibernate的基本映射思想 ⊙ Hibernate入门知识 ⊙ 使用Eclipse开发Hiberna ...

  6. MongoDB文档的增删改操作

    上一篇文章中介绍了MongoDB的一些基本知识,同时看到了怎么启动一个MongoDB服务,并且通过MongoDB自带的shell工具连接到了服务器. 这一次,就通过MongoDB shell介绍一下对 ...

  7. express不是内部或外部命令，也不是可运行的程序或批处理文件

    如上安装了express以后,仍然报如下错误:express不是内部或外部命令,也不是可运行的程序或批处理文件 原因是版本问题:当前版本是4.0.0,改成3.5.0即可运行. npm install ...

  8. Explaining Delegates in C# - Part 3 (Events 2)

    I was thinking that the previous post on Events and Delegates was quite self-explanatory. A couple o ...

  9. Qt Creator build遇到error lnk1158 无法运行rc.exe

    解决办法: 将C:\Program Files (x86)\Windows Kits\10\bin\10.0.15063.0\x64 目录下的rc.exe 和rcdll.dll 复制到 C:\Prog ...

  10. 解决16bit压缩贴图失真问题

    选择索引模式