步骤：

/* 用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. Java编程思想学习笔记——初始化与清理

    初始化 构造器保证初始化 构造器采用与类相同的名称. 默认构造器(default constructor):不接受任何参数的构造器,也叫无参构造器. 构造器也能带有形式参数,就能在初始化对象时提供实际 ...

  2. HTML5 标准规范完成了

    ​    ​万维网联盟(W3C)昨天宣布,HTML5 标准规范终于最终制定完成了,并已公开发布.对于前端工程师来说,这无疑是一个振奋人心的好消息. ​    ​众所周知,HTML5改变了互联网,将成为 ...

  3. nginx反向代理配置（nginx.conf+proxy_set_header）

    转载:https://blog.csdn.net/bjsunwei/article/details/62231209 location / { proxy_pass http://test; prox ...

  4. 安卓webview子线程网络请求，怎么获得结果？

    向webview注入网络上的js,就需要请求js的url.但不允许在主线程直接发http请求,需要开子线程,开了子线程后,子线程就自己运行,主线程也自己运行,但是我的主线程需要子线程的结果才能继续往下 ...

  5. Get started with ros -- 1

    原创博文:转载请标明出处(周学伟):http://www.cnblogs.com/zxouxuewei/tag/ 一.Introduction: 机器人操作系统(ROS)是使机器人系统的不同部分能够发 ...

  6. SpringMVC由浅入深day02_8json数据交互

    8 json数据交互 8.1 为什么要进行json数据交互 json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据 ...

  7. C语言中的static关键字

    C语言代码是以文件为单位来组织的,在一个源程序的所有源文件中,一个外部变量(注意不是局部变量)或者函数只能在一个源程序中定义一次,如果有重复定义的话编译器就会报错.伴随着不同源文件变量和函数之间的相互 ...

  8. 顶点纹理shader

    Shader "Custom/VertDisplace" { Properties { _MainTex ("Base (RGB)", 2D) = " ...

  9. 嵌入式ROOTFS transplantation

    作一个嵌入式Linux rootfs,并且实现 web 服务 1. 文件系统简介 •理论上说一个嵌入式设备如果内核能够运行起来,且不需要运行用户进程的话,是不需要文件系统的,文件系统简单的说就是一种目 ...

  10. (iOS)使用auto layout进行复杂布局时，UILabel的相关trick

    本文转载至 http://blog.csdn.net/madongchunqiu/article/details/47960745  本文首发于CSDN:http://blog.csdn.net/ma ...