用js内置对象XMLHttpRequest 来用ajax

步骤：

/* 用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;
}
}

代码：

 1 <!doctype html>2 <html lang="en">3 <head>4     <meta charset="UTF-8">5     <title>XHR</title>6     <link rel="stylesheet" href="../templates/css/verify.css">7 </head>8 <body>9
10     <input type="text" id="username"><input type="button" value="提交" οnclick="dadaHttpRequest()">
11     <div class="box" id="box"></div>
12         <script type="text/javascript" src="../templates/js/jquery.js"></script>
13         <script>
14
15         /* 用XMLHTTPRequest来进行ajax异步数据交交互*/
16         //1.创建XMLHTTPRequest对象
17         var xmlhttp;
18         //最复杂的一步
19         function dadaHttpRequest(){
20             var username = document.getElementById('username').value;
21             if (window.XMLHttpRequest) {
22                 // code for IE7+, Firefox, Chrome, Opera, Safari
23                 xmlhttp = new XMLHttpRequest;
24
25                 //针对某些特定版本的mozillar浏览器的bug进行修正。
26                 if (xmlhttp.overrideMimeType) {
27                       xmlhttp.overrideMimeType('text/xml');
28                 };
29
30             } else if (window.ActiveXObject){
31                 // code for IE6, IE5
32                 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
33             };
34
35             //2.注册回调函数
36             //onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数。
37             xmlhttp.onreadystatechange = callback;
38
39             //3.设置连接信息
40             //初始化HTTP请求参数，但是并不发送请求。
41             //第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步
42             xmlhttp.open("GET","xhr.php?name="+username,true);
43
44             /*******************************************/
45             /*如果是xmlhttp.open("GET","xhr.php",true);*/
46             /*    xmlhttp.send('name=' +username);     */
47             /*    不行的                               */
48             /*******************************************/
49
50             //使用post方式发送数据
51             //xmlhttp.open("POST","xhr.php",true);
52             //post需要自己设置http的请求头
53             //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
54
55             //4，发送数据，开始和服务器进行交互
56             //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
57             //中如果true, send这句话会立即执行
58             //如果是false（同步），send会在服务器数据回来才执行
59             xmlhttp.send(null);
60             //因为是get所以send中不需要内容
61             //xmlhttp.send('name=' +username);
62
63         }
64
65         //5回调函数,不同相应状态进行处理
66         function callback(){
67             //alert(xmlhttp.readyState);
68             //判断对象状态是交互完成，接收服务器返回的数据
69             if (xmlhttp.readyState==4 && xmlhttp.status==200)
70                 {
71                 //["dada","xiaoyin","liujie"]
72                 //纯文本的数据
73                 var responseText = xmlhttp.responseText;
74                 var divNode = document.getElementById('box');
75                 //6.将服务器的数据显示在客户端
76                 divNode.innerHTML = responseText;
77                 }
78         }
79         </script>
80 </body>

转载于:https://www.cnblogs.com/dxqNet/p/6781959.html

用js内置对象XMLHttpRequest 来用ajax相关推荐

JS 内置对象 String对象
JS内置对象 String对象:字符串对象,提供了对字符串进行操作的属性和方法. Array对象:数组对象,提供了数组操作方面的属性和方法. Date对象:日期时间对象,可以获取系统的日期 ...
前端：JS/23/JS内置对象（String对象，Array对象，Date对象，Boolean对象，Number对象，Math对象），实例：求圆的面积，求直角三角形
JS内置对象 1,String对象字符串对象,提供了对字符串进行操作的属性和方法 2,Array对象数组对象,提供了数组操作方面的属性和方法 3,Date对象日期时间对象,可以获取系统的日期时间 ...
4月5日--课堂笔记--JS内置对象
JavaScript 4.5 一. JS内置对象 1.数组Array a)创建语法1:var arr=new Array(参数); i. 没有参数:创建一个初始容量为0的数组 ii. ...
js内置对象【学习笔记】
今天系统的学了一下javascript的内置对象.mark相关的知识点: 首先,什么是js的内置对象,它包括了些什么内容?(以下内容转自网上资源的整合) (W3shool JS手册地址:http:// ...
window内置对象和js内置对象与方法
window内置对象一.navigator 代表着浏览器本身的信息: 代码名:navigator.appCodeName 浏览器语言:navigator.browserLanguage 操作系统 ...
JS内置对象及其用法总结
首先JS对象分为3种:自定义.内置.浏览器.今天就总结一下JS内置对象以及一些用法. 一.Math对象:不是一个构造函数,不需要new,直接调用即可. 1.Math.max(x,y);返回x,y的最大 ...
JS内置对象操作方法整理
JS对象操作方法整理文章目录 JS对象操作方法整理数组 ES5 ES6 字符串 String 日期 Date() 数字 Number 算数 Math 数组 ES5 concat() 连接两个或更多 ...
js内置对象常用方法
js内置对象常用方法 JS内置对象: ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储.转化和表达 ● Array对象:提供一个 ...
js浏览器内置对象和js内置对象
浏览器内置 1.Location 对象 hash :返回一个URL的锚部分 host 返回一个URL的主机名和端口 hostname 返回URL的主机名 href 返回完整的URL pathname ...

用js内置对象XMLHttpRequest 来用ajax

用js内置对象XMLHttpRequest 来用ajax相关推荐

最新文章

热门文章