提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
提示:以下是本篇文章正文内容,下面案例可供参考
一、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("登录成功");
}
})
})