步骤：

/* 用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. 网页CSS常用中英文字体收集

    Windows的中文字体: 黑体:SimHei 宋体:SimSun 新宋体:NSimSun 仿宋:FangSong 楷体:KaiTi 仿宋_GB2312:FangSong_GB2312 楷体_GB23 ...

  2. PHP对HTML代码尸体编码2个函数

    1.htmlspecialchars() 函数把一些预定义的字符转换为 HTML 实体. 2.htmlentities() 函数把字符转换为 HTML 实体. 记录下

  3. iis6.0 default web site 无法启动

    按照以往方式打开http://localhost/blog2/index.asp时,意外被提醒出现错误:http 404 无法找到文件.一时感觉不知所措,怎么会出现这样的问题? 近来还碰到了一个问题, ...

  4. chrome插件开发之调试

    https://blog.csdn.net/qustdong/article/details/46046553

  5. pycharm使用docker镜像的python解释器，pycahrm可视化操作和管理dcoker

    网上关于pycahrm怎么使用docker容器的python解释器的科普,这方面太少,一半都只介绍pycahrm怎么使用linux的解释器.首先pycahrm确保是pro版本. 下面详细的介绍步骤 首 ...

  6. [Algorithm] Deferred Acceptance Algorithm

    约会配对问题 一．立即接受算法: 对于约会的配对,大家都去追自己最心仪的女生.而这个女生面对几位追求者,要立刻做个决定. 被拒绝的男生们调整一下心情,再去追求心中的 No. 2.以此类推. 这样做法有 ...

  7. IOS私有API的使用(转)

    最近在做企业级程序,需要搞设备的udid等信息,但是ios7把udid私有化了,不公开使用.所以研究了一下ios的私有api.   调查了一下文章,发现这方面的文章不多,国内更是不全,高手们都懒得写基 ...

  8. SPREAD for Windows Forms 下箭头追加行

    ''' <summary> ''' 下矢印の動作クラス ''' </summary> ''' <remarks></remarks> Public Cl ...

  9. 【遥感影像】Python GDAL 像素与坐标对应

    转:https://blog.csdn.net/theonegis/article/details/50805520 https://blog.csdn.net/wsp_1138886114/arti ...

  10. Qt生成ui文件对应的.h和.cpp文件

    在VS中,可以通过CMake设定QT5_WRAP_UI来编译a.ui到ui_a.h, 要想快速生成a.h和a.cpp,经过尝试,必须使用Qt Creator,否则就手写.