步骤：

/* 用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. ubuntu-16.04.1-desktop-amd64.iso：ubuntu-16.04.1-desktop-amd64：安装Oracle11gR2

    特点: 使用ubuntu-16.04.1-desktop-amd64.iso liveCD模式 + Casper-rw 本地文件 不降级默认的gcc版本,(liveCD 自带默认为 gcc 5.4): ...

  2. Python 常用类库

    python除了关键字(keywords)和内置的类型和函数(builtins),更多的功能是通过libraries(即modules)来提供的. 常用的libraries(modules)如下: 1 ...

  3. Centos6.3 下使用 Tomcat-6.0.43 非root用户 部署 生产环境 端口转发方式

    一.安装JDK环境 方法一. 官方下载链接 http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260 ...

  4. cocos2dx 优化略记

    缓存cache: 预加载资源到内存, 可以异步加载.  直接使用sprite:create()来加载资源的话,  有时候会发现,  在第一次运行动作的时候会变的很卡.  那是因为第一次要加载资源到内存 ...

  5. Android5.x新特性之 Toolbar和Theme的使用

    Toolbar 你还在为Android 的ActionBar的文字不能随意设置位置而烦恼么?你还在为ActionBar不能自定义添加自己的布局而烦恼么?现在告诉你一个好消息,当你看到这篇文章时,就不必 ...

  6. 关于Kafka幂等producer的讨论

    众所周知,Kafka 0.11.0.0版本正式支持精确一次处理语义(exactly once semantics,下称EOS).Kafka的EOS主要体现在3个方面: 幂等producer:保证发送单 ...

  7. 【译】调优Apache Kafka集群

    今天带来一篇译文“调优Apache Kafka集群”,里面有一些观点并无太多新颖之处,但总结得还算详细.该文从四个不同的目标出发给出了各自不同的参数配置,值得大家一读~ 原文地址请参考:https:/ ...

  8. Kafka Java API操作topic

    Kafka官方提供了两个脚本来管理topic,包括topic的增删改查.其中kafka-topics.sh负责topic的创建与删除:kafka-configs.sh脚本负责topic的修改和查询,但 ...

  9. spring boot配置文件application.propertis

    转自http://www.qiyadeng.com/post/spring-boot-application-properties 本文记录Spring Boot application.proper ...

  10. iOS 沙盒目录结构及正确使用

    前言:处于安全考虑,iOS系统的沙盒机制规定每个应用都只能访问当前沙盒目录下面的文件(也有例外,比如在用户授权情况下访问通讯录,相册等),这个规则展示了iOS系统的封闭性.在开发中常常需要数据存储的功 ...