XMLHttpRequest 学习（二）—

1、发起一个HTTP的步骤：

创建一个 XMLHttpRquest 实例，

1 var xhr=new XMLHttpRequest();

　　2.初始化请求，

1 xhr.open(method,URL,async);

　　3.设置请求头信息，按需设置，不需要设置就到下一步，用 POST 方法时，必须将请求头设置为：

1 xhr.setRequestHeader("Content-Type","appivation/x-www=form-unurlencoded");//在POST和PUT请求需要设置该信息

　　4.绑定相关事件，异步请求中，readystatechange 必须班绑定，其他事件按需绑定

 1         //第四步 设置回调函数和xhr事件,在异步请求中必须绑定onreadystatechage事件，readyState改变就触发
 2         xhr.onreadystatechange=callback;//绑定一个函数
 3         //或者用匿名函数
 4         xhr.onreadystatechange=function (){
 5             if(xhr.readyState ==4 ){
 6                 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
 7                     //响应信息返回后处理，在页面提示用户
 8                 }
 9                 else{//返回消息失败
10                     alert("响应失败！");
11                 }
12             }
13             else{//请求未发送的处理
14                 alert("请求未完成！")
15             }
16         }
17         //send()调用后开始触发
18         xhr.οnlοadstart=loadState;
19
20         //文件上传可能需要设置这些事件
21         //上传文件开始
22         xhr.upload.οnlοadstart=uploadStart;
23         //显示上传进度
24         xhr.upload.οnprοgress=uploadProgress;
25         //上传完成，成功
26             //出现异常或者用户取消，激发abort、timeout、error事件，触发loadend事件
27             xhr.οnabοrt=abort;
28             xhr.ontimeout=timeeout;
29             xhr.οnerrοr=error;
30         xhr.upload.οnlοad=upload;
31         //上传结束，可能不成功
32         xhr.upload.onloadend=uploadEnd;
33
34         //显示下载进度
35         xhr.οnprοgress=loadProgress;
36         //出现异常或者用户取消，激发abort、timeout、error事件，触发loadend事件
37         xhr.οnabοrt=abort;
38         xhr.ontimeout=timeeout;
39         xhr.οnerrοr=error;
40         //下载完成，可能不成功
41         xhr.onloadend=loadEnd;

5.发送，在POST需要传递参数，最后将参数转码。

//第五步 发送请求,在POST请求中需要给send传递参数xh.send();

下面就根据上面的步骤，建立一个get请求：

HTML:

 1 <div>
 2         <form >
 3             <fieldset>
 4                 <legend> xhr提交表单 </legend>
 5                 <lable>姓名：</lable>
 6                 <input type="text" id="name" name="name" value="周其军" placeholder="请输入您的姓名" />
 7                 <br>
 8                 <lable>邮箱：</lable>
 9                 <input type="email" placeholder="请输入邮箱" id="email" name="email" />
10                 <br/>
11                 <input type="button" id="button" value="提交" /> </fieldset>
12         </form>
13     </div>
14     <div id="userInfor">
15              <!--在这显示返回的内容-->
16     </div>

JS:

 1 window.οnlοad=function(){
 2 var button=document.getElementById("button"); //获取button
 3     var userInfor=document.getElementById("userInfor");
 4     button.addEventListener("click",function(){
 5         var url="demo.php";
 6         var name=document.getElementById("name").value;
 7         var email=document.getElementById("email").value;
 8         //alert(name+email);
 9         url+="?name="+name+"&email="+email;
10         var xhr=new XMLHttpRequest();
11         /*xhr.setRequestHeader("jack","hahah");*/
12         xhr.open("GET",url,true);//初始化一个异步请求
13         xhr.onreadystatechange=function(){
14             if(xhr.readyState==4){
15                 if(xhr.status==200){
16                     //将用户填写的信息显示出来
17                     alert(xhr.response);
18                 }
19                 /*else{
20                     alert("响应不成")
21                 }*/
22             }
23             /*else{
24                 alert("请求未发送！");
25             }*/
26         }
27         xhr.send();
28     });

PHP:

1 <?php
2  header("Content-type: text/html; charset=utf-8");
3 echo "<h2>名字：{$_REQUEST['name']}</h2>
4        <span>邮箱：{$_REQUEST['email']}</span>";
5
6 ?>

请求成功了，但是我想返回 html 片段，然后追加到 id=userInfor 的 div 里面，不知道怎么弄。也没搜索的可靠的做法。也是是我的 PHP 不对？？

2、封装一个 ajax

 1         var ajax = {}; //封装一个ajax
 2         ajax.x = function () { //定义x,用于创建xhr。
 3             if (typeof XMLHttpRequest !== 'undefined') {
 4                 return new XMLHttpRequest();
 5             }
 6             var versions = [
 7         "MSXML2.XmlHttp.6.0"
 8         , "MSXML2.XmlHttp.5.0"
 9         , "MSXML2.XmlHttp.4.0"
10         , "MSXML2.XmlHttp.3.0"
11         , "MSXML2.XmlHttp.2.0"
12         , "Microsoft.XmlHttp"
13     ];
14             var xhr;
15             for (var i = 0; i < versions.length; i++) {
16                 try {
17                     xhr = new ActiveXObject(versions[i]);
18                     break;
19                 }
20                 catch (e) {}
21             }
22             return xhr;
23         };
24         //定义 send()
25         ajax.send = function (url, callback, method, data, async) {
26             if (async === undefined) {
27                 async = true;
28             }
29             var x = ajax.x();
30             x.open(method, url, async);
31             x.onreadystatechange = function () {
32                 if (x.readyState == 4) {
33                     callback(x.responseText)
34                 }
35             };
36             if (method == 'POST') {
37                 x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
38             }
39             x.send(data)
40         };
41         //定义 get 请求
42         ajax.get = function (url, data, callback, async) {
43             var query = [];
44             for (var key in data) {
45                 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
46             }
47             ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
48         };
49         //定义 post 请求
50         ajax.post = function (url, data, callback, async) {
51             var query = [];
52             for (var key in data) {
53                 query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
54             }
55             ajax.send(url, callback, 'POST', query.join('&'), async)
56         };

调用 ajax 的方法：

 1 var button = document.getElementById("button");
 2         button.addEventListener("click", function () {
 3             var name = document.getElementById("name").value;
 4             var email = document.getElementById("email").value;
 5             var userInfor = document.getElementById("userInfor");
 6             ajax.get("demo1.php?rand=" + Math.random(), {
 7                 name: name
 8                 , email: email
 9             }, function () {
10                 var xhr = ajax.x();
11                 //alert("aa");
12                 //alert(xhr.responseText);请求响应了，却没弹出 响应信息
13                 userInfor.append(xhr.responseText);
14             });
15         });

博客园插入代码还是很不方便，光标进入代码块后，不能移出来。

转载于:https://www.cnblogs.com/jackzhoumine/p/6567226.html

XMLHttpRequest 学习（二）——封装一个ajax相关推荐

使用原生JS封装一个Ajax
原生的Ajax写起来比较麻烦,而且每次使用的时候都得从头开始写,导致了很多不必要的工作量,产生了大量的冗余代码.这里就可以封装一个Ajax,以供以后的开发中进行使用. 首先,要想封装一个Ajax,就得 ...
ajax通讯原理,ajax通讯原理以及自己封装一个ajax函数
ajax通讯原理要解释ajax的原理,需要从旧的交互方式开始,当用户触发一个http请求到服务器,服务器对其进行处理之后,再返回一个新的html页到客户端,每当服务器处理客户端提交的请求时,客户都只 ...
ajax datatype_JavaScript学习笔记（二十七） ajax及ajax封装
AJAX ajax 全名 async javascript and XML 是前后台交互的能力也就是我们客户端给服务端发送消息的工具,以及接受响应的工具是一个默认异步执行机制的功能 AJAX ...
先定一个小目标，自己封装个ajax
你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...
ajax请求封装,封装的ajax请求
在做登录注册这类提交表单数据时,我们经常需要局部刷新网页来验证用户输入的信息,这就需要用到ajax请求,我们通常需要获取表单中的数据,发起ajax请求,通过服务程序,与数据库的数据进行比对,判断信息的 ...
封装一个类似jquery的ajax方法
//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{// type:"get"/"post", // dataTy ...
快速封装一个二维码在线生成接口
方法一:利用接口,生成二维码这种方法生成的二维码最简单,你只需要调用别人提供的二维码生成接口,同时传递相应的参数即可. <?php /*** @author DengPeng <3@de ...
AVI音视频封装格式学习(二)——AVI RIFF文件参考
AVI RIFF文件参考 AVI RIFF File Reference 微软AVI文件格式是与捕获,编辑和播放音视频流的应用程序一起使用的RIFF文件规范.通常,AVI文件包含多个不同类型的数据流. ...
封装一个自己的通用Ajax
一个简单的Ajax请求首先在封装一个自己的ajax函数之前,我们需要先知道怎么实现一个简单的ajax请求. 这里我建了两个文件,ajax01.html和ajax01.php ajax01.html代 ...
tensorflow学习笔记二——建立一个简单的神经网络拟合二次函数
tensorflow学习笔记二--建立一个简单的神经网络 2016-09-23 16:04 2973人阅读评论(2) 收藏举报分类: tensorflow(4) 目录(?)[+] 本笔记目的 ...

XMLHttpRequest 学习（二）——封装一个ajax

XMLHttpRequest 学习（二）——封装一个ajax相关推荐

最新文章

热门文章