步骤：

/* 用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. 【转】maven同时使用maven-surefire-report-plugin和maven-surefire-plugin默认将执行两次test

    https://issues.apache.org/jira/browse/SUREFIRE-753 Here the pom.xml snippet how i configured the rep ...

  2. SSM框架快速整合实例——学生查询

    一.快速准备 SSM 框架即 Spring 框架.SpringMVC 框架.MyBatis 框架,关于这几个框架的基础和入门程序,我前面已经写过几篇文章作为基础和入门介绍了.这里再简单的介绍一下: 1 ...

  3. git 强制刷新，放弃更改

    git fetch --all  git reset --hard origin/master

  4. mysql 错误代码：1118解决方法

    错误描述: 错误代码: 1118Row size too large. The maximum row size for the used table type, not counting BLOBs ...

  5. 使用System.Web.Optimization对CSS和JS文件合并压缩

    在ASP.NET MVC 中JS/CSS文件动态合并及压缩通过调用System.Web.Optimization定义的类ScriptBundle及StyleBundle来实现. 大致步骤如下: 1.A ...

  6. 上机题目（0基础）- 用数组实现记事本（Java）

    用java实现一个记事本程序,记录记下的按键,代码例如以下: package com.java.test; import java.awt.Graphics; import java.awt.even ...

  7. Jackson JSON Processor

    Jackson提供接口,可以再json和bean之间互相转换 1. 一个例子 public class JsonToJavaBean { public static void main(String[ ...

  8. MHL相关资源链接

    http://www.mhlconsortium.org/ 消费者网站: www.meetmhl.com采用者网站:www.mhltech.org 博客http://blog.sina.com.cn/ ...

  9. 嵌入式之UBOOT

    嵌入式Linux系统的结构分为四个区,如图所示: 1.Bootloader区存放的是Bootloader,Coidre972开发板上使用的uboot,它负责嵌入式系统最初的硬件初始化.驱动和内核加载. ...

  10. CDN的那些细枝末节

    起源: 原本打算系统看看关于axios的介绍,无意中就看见一句"Using cdn",于是百度一下,"cdn"是什么? 名词解释:CDN CDN的全称是Cont ...