Ajax设置请求和接收响应、自己封装简易jQuery.Ajax、回调函数
Ajax设置请求和接收响应、自己封装简易jQuery.Ajax
这篇文章是承接前几篇博客的,是前几篇继续学习 包括Ajax学习与理解和简化版自己实现jQuery等 这篇文章只算是我的个人学习笔记,内容没有精心排版,一些错误请见谅.
所有代码都在这里,从历史commit可以看到所有代码,摆阔一个简易的node.js服务器 所有代码在历史commit里(AjaxStudy---github)
1JS设置任意请求
一个http请求分为四个部分 请求行,请求头,回车,请求体
设置请求的四个部分(第三部分为回车):
- 第一部分
request.open('get', '/xxx')
- 第二部分
request.setRequestHeader('content-type','x-www-form-urlencoded')
- 第四部分
request.send('a=1&b=2')
request.setRequestHeader()
方法需要注意的是此方法必须在 open()
方法和 send()
之间调用。
XMLHttpRequest.setRequestHeader()
另外需要注意的是,如果设置西请求方法为get 并且设置了请求体(第四部分),在谷歌浏览器中看不到请求体,不报错但是不显示 示例代码:
myButton.addEventListener("click",(e)=>{
let request = new XMLHttpRequest();
request.open('POST','/xxx')//配置request
//设置第二部分
request.setRequestHeader("mataotao","123123xxx")
request.setRequestHeader('content-type','x-www-form-urlencoded')
request.send("a=1&b=2");//发送请求
request.onreadystatechange = ()=>{
if(request.readyState ===4){
console.log("请求和响应都完毕了");
if ( request.status>=200&&request.status<=400){
console.log('说明请求成功');
let string = request.responseText;
//把符合json语法的字符串转化为js对应的值
let object2 = window.JSON.parse(string);
console.log(object2)
}else if(request.status>=400){
console.log("响应失败");
}
}
}
})
查看请求
2JS获取任意响应
响应的四个部分
获取四个部分的响应
- 第一部分
request.status
/request.statusText
- 第二部分
request.getResponseHeader()
/request.getAllResponseHeaders()
- 第四部分
request.responseText
myButton.addEventListener("click",(e)=>{
let request = new XMLHttpRequest();
request.open('POST','/xxx')//配置request
//设置第二部分
request.setRequestHeader("mataotao","123123xxx")
request.setRequestHeader('content-type','x-www-form-urlencoded')
request.send("a=1&b=2");//发送请求
request.onreadystatechange = ()=>{
if(request.readyState ===4){
console.log("请求和响应都完毕了");
if ( request.status>=200&&request.status<=400){
console.log('说明请求成功');
//*核心代码 */
//第一部分:
console.log("获取响应第一部分:")
console.log(request.status)//200
console.log(request.statusText)//ok
//第二部分:
console.log("获取响应第二部分:")
console.log(request.getResponseHeader('Content-Type'))
console.log(request.getAllResponseHeaders())
//第四部分:
console.log("获取响应第四部分:")
console.log(request.responseText)
//*核心代码 */
let string = request.responseText;
//把符合json语法的字符串转化为js对应的值
let object2 = window.JSON.parse(string);
// console.log(object2)
}else if(request.status>=400){
console.log("响应失败");
}
}
}
})
3 客户端/服务器模型
客户端使用js设置请求的四个部分, 服务器用nodejs也可以设置响应的四个部分
为什么要三次握手?
三次握手: A:我能连你了吗? B: 可以连我,你连吧 A:那我连你了 开始发送数据
原因:因为要保证A/B 都可以收发信息 ,数据才能在AB之间传输
1. A:我能连你了吗? B: 可以 说明A可以发信息,B可以接受信息
2. B: 可以连我,你连吧 A:那我连你了 说明B可以发送信息,A可以接受信息
3 自己封装jQuery.Ajax(简单原理)
所有代码在历史commit里(AjaxStudy---github)
3.1 方法一
window.jQuery = ()=>{//假装有一个简易的jQuery,具体封装
let object1 = {};
boject1.addClass = function(){};
boject1.show = function(){};
return object1;
}
window.jQuery.ajax = (method,path,body,successFn,failFn)=>{
let request = new XMLHttpRequest();
request.open(method,path)
request.send(body);
request.onreadystatechange = ()=>{
if(request.readyState ===4){
if ( request.status>=200&&request.status<=400){
successFn.call(undefined,request.responseText)//执行成功函数
}else if(request.status>=400){
failFn.call(undefined,request)//执行失败函数
}
}
}
}
window.$ = window.jQuery;
myButton.addEventListener("click",(e)=>{
//使用ajax
$.ajax("post",
"/xxx",
"username=mtt&password=1",
function(result){
console.log('成功了,返回的响应体为:')
console.log(result);//打印request.responseText
},
function(result){
console.log(result);
console.log(result.status);//打印失败的状态码
console.log(result.responseText);//打印失败时返回的响应体
}
)
})
结果: 成功时:
失败时:(假如请求一个不存在的路径,响应状态码是404,但是也有响应体responseText)
例如,访问一个不存在的路径/frank:
myButton.addEventListener("click",(e)=>{
//使用ajax
$.ajax("post",
"/frank",
"username=mtt&password=1",
function(result){
console.log('成功了,返回的响应体为:')
console.log(result);//打印request.responseText
},
function(result){
console.log(result);
console.log(result.status);//打印失败的状态码
console.log(result.responseText);//打印失败时返回的响应体
}
)
})
返回状态码404,而且有设置的返回体
因为我的服务器端的代码为:
else {
response.statusCode = 404
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(`{
"error":"404error"
}`)
response.end()
}
这种方法的缺点:这个函数必须按照规定的顺序传参,第二,如果没有参数就会出现类似于$.ajax("post",null,successFn,null)
的情况,必须传有结构的参数(对象)
3.2什么是回调
在上面的代码中,在ajax
函数中传了一个successFN
,failFn
函数作为参数,但是执行的时候是在别的地方执行的(在request.onreadystatechange
里)
if(request.readyState ===4){
if ( request.status>=200&&request.status<=400){
successFn.call(undefined,request.responseText)//执行成功函数
}else if(request.status>=400){
failFn.call(undefined,request)//执行失败函数
这两个函数就是回调函数
回调(callback): 回来执行的意思,自己不call. 把这个函数给别人,自己不执行,让别人执行,就是callback
回调:使用方代码不执行,只传一个函数,回来再执行
回调就是传一个函数,自己不执行,传到别的地方让他在那里执行的函数!只要满足这个条件就叫回调而已.他是一个函数,只不过在别的地方执行了
所以看上去没有执行,实际上success了就执行传进去的这个函数
3.3封装方法二:传有结构的参数(对象)
let myButton = document.getElementById('myButton');
window.jQuery = ()=>{//假装有一个简易的jQuery
let object1 = {};
boject1.addClass = function(){};
boject1.show = function(){};
return object1;
}
window.jQuery.ajax = (options)=>{
//获取传进来的对象的value
let method = options.method;
let path = options.path;
let body = options.body;
let successFn = options.successFn;
let failFn = options.failFn;
let headers = options.headers;
let request = new XMLHttpRequest();
request.open(method,path);//配置
for (const key in headers) {//遍历header,设置响应头
let value = headers[key];
request.setRequestHeader(key,value);
}
request.send(body);//发送,并配置响应体
request.onreadystatechange = ()=>{
if(request.readyState ===4){
if ( request.status>=200&&request.status<=400){
successFn.call(undefined,request.responseText);//执行成功函数
}else if(request.status>=400){
failFn.call(undefined,request);//执行失败函数
}
}
}
}
window.$ = window.jQuery;
myButton.addEventListener("click",(e)=>{
//使用ajax
$.ajax({
method:"post",
path:"/xxx",
body:"username=mtt&password=1",
headers:{
"content-type":'application/x-www-form-urlencoded',
"mataotao":18
},
successFn:function(result){//成功函数的回调
console.log('成功了,返回的响应体为:');
console.log(result);//打印request.responseTex
},
failFn:function(){
console.log(result);
console.log(result.status);//打印失败的状态码
console.log(result.responseText);//打印失败时返回的响应体
}
}
)
})
结果:
4真正的jQuery.ajax()API如何使用
$.ajax({
type: "GET",
url: "/test",
dataType: "script",
data:{}
success:function(){},
});
dataType
就是setRequestHeader("content-type","application/javascript")
data
就是请求的第四部分
5函数传不同的参数
例如文档里的
jQuery.ajax( url [, settings ] )
jQuery.ajax( [settings ] )
jQuery.ajax
第一个参数既可以是url字符串你也可以是对象
如何实现这种封装?
只要在最开始判断参数长度即可
let url;
if(arguments.length===1){//参数长度为1
url = options.url;
}else if(arguments.length===2){//参数长度为2
url = arguments[0];
options = arguments[1];
}
其余代码不变
6 一点点ES6语法:解构赋值
或者直接
- Android Native 开发之 NewString 与 NewStringUtf 解析
- OpenJDK8 Windows编译
- Spring Boot 开发应用热部署
- Python之多线程爬虫抓取网页图片
- Mycat适配oracle,各种坑
- 看完这个,不用写代码就能实现深度学习了
- Mycat -- linux安装与配置笔记
- 挖洞经验 | 记一次曲折的Getshell过程
- Java泛型一览笔录
- Java多态性的“飘渺之旅”
- Java动态代理一览笔录
- activiti-explorer部署笔记
- 没有准考证号我是如何暴力查询英语六级成绩的
- asp.net web api 2.2 基础框架(带例子)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Go 每日一库之 copier
- Struts2第一天Struts2的概述,Struts2的入门,Struts2常见的配置、Struts2的Action的编写
- SQL 求平均值时去掉极值
- Go 每日一库之 jennifer
- Go 每日一库之 go-cmp
- 孤立森林(Isolation Forest)
- Go 每日一库之 buntdb
- SQL 将多列的数据转到一列
- Go 每日一库之 gjson
- Go 每日一库之 sjson
- SQL 计算累积销售额
- Go 每日一库之 jj
- Struts2第二天:Struts2的数据的封装、结果页面配置
- Go 每日一库之 govaluate
- Go 每日一库之 validator