JavaScript(19) - Ajax下,POST请求实现登录注册,Ajax封装,promise

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、POST请求

1. 字符编码和解码

特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理, 中文字符的返回及传参, 可以将页面保存和设置为utf-8格式即可.

字符编码

var url = encodeURIComponent(name) + ‘=‘ + encodeURIComponent(value); 

字符解码

var url2 = decodeURIComponent(url); 

2. 请求头

请求头包含HTTP的头部信息, 即服务器返回的响应头信息和客户端发送出去的请求头信息. 我们可以获取响应头(response)信息或者设置请求头(request)信息。

使用 getAllResponseHeaders()获取整个响应头信息

console.log(xhr.getAllResponseHeaders());

使用 getResponseHeader()获取单个响应头信息
console.log(xhr.getResponseHeader(‘Content-Type’));

使用 setRequestHeader()设置单个请求头信息

xhr.setRequestHeader(“MyHeader”, Zhang); //放在open方法之后, send方法之前

3. POST请求

POST请求可以包含非常多的数据, 我们在使用表单提交的时候, 很多就是使用的POST传输方式。

xhr.open('post', 'demo.php', true);

POST请求向服务器发送的数据, 不会跟在URL后面, 而是通过send()方法向服务器提交数据。

xhr.send('name=Zhang&age=100');

POST请求和Web表单提交不同, 需要使用XHR来模仿表单提交.

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

从性能上来讲POST请求比GET请求消耗更多一些, 用相同数据比较, GET最多比 POST快两倍. 这也是我们GET请求的使用率大于POST的原因.
示例: 使用post请求方式验证注册表单的用户名是否可以注册.

二、登录注册

1. 注册（POST）

注册接口: http://60.205.181.47/myPHPCode3/register.php
参数:username=zhangsan, 用户名（必须）
参数:password=123456,密码（必须）
参数:age=33,年龄（必须）

2. 登录（POST）

登录接口: http://60.205.181.47/myPHPCode3/login.php
参数:username=zhangsan,用户名
参数:password=123456,密码

三、Ajax封装

1. Ajax的封装(扩展)

对象的遍历

var box = {
     name : "张三",
     age : 199,
     run: function() {
          console.log("run");
     }
}
for(var i in box) {
     console.log(i);
     console.log(box[i]);
}

函数的回调机制

function func1(obj) {
     console.log(obj.name);
     console.log(obj.age);
     obj.runWithPerson("李四");  //回调
}
var box = {
     name:"张三",
     age:22,
     runWithPerson:function(person){
          console.log("和 " + person + " 跑步...");
     }
};
func1(box);

封装 Ajax:

//创建XHR对象
function createXHR() {
     if (window.XMLHttpRequest) {
          return new XMLHttpRequest(); //非IE7+, Chrome, FF
     }
     return new ActiveXObject("Micrisoft.XMLHTTP");  //IE6
}

//对参数编码,并使用&连接
function params(data) {
     var arr = [];
     //for-in遍历对象
     for (var i in data) {
          arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
     }
     return arr.join("&");
}
//封装Ajax函数
function ajax(obj) {
     var xhr = createXHR();
     obj.data = params(obj.data); //参数
     //判断是否是get
     if (obj.type == "get") {
          obj.url += obj.data.length>0 ? ("?" + obj.data) : "";
     }
     //open
     xhr.open(obj.type, obj.url, obj.async);
     //send 
     if (obj.type == "post") { 
          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
          xhr.send(obj.data); 
     }
     else {
          xhr.send(null);	
     }
     
       //异步
     if (obj.async == true) { 
          xhr.onreadystatechange = function() {
               console.log(xhr.responseText);
                    if (xhr.readyState == 4) { //接受到服务器响应
                         callback();
                    }
               }
          }	
          
     //同步
     else {
          callback();
     }
 //接受到服务器数据后调用
     function callback() {
          if (xhr.status == 200) {
               obj.success(xhr.responseText); //回调
          }
          else {
               var errObj = {status: xhr.status, statusText: xhr.statusText};
               obj.failure(errObj);
          }
     }	
}

调用ajax

ajax({
     type: "post",
     url: “http://127.0.0.1/person.php”,
     data: {regname:"lisi", age:33},
     async: true,
     success: function(responseText) {
          console.log("获取数据成功: " + responseText);
     },
     failure: function(errorObj) {
     console.log("获取数据失败! 状态码:"+errorObj.status + ", 状态信息:"+errorObj.statusText);
     }	
});

四、promise

1. Promise

  实现Ajax异步的依赖调用

例如： 实现先注册 后登陆

var p = new Promise(function(resolve, reject){
      ajax({
	success: function(d){
    	      resolve(d);
	} 
      })  
})
p.then(function(data){
      ajax({
	success: function(d){
  	      console.log("登录成功");					
	} 
      }) 		
})