知识----------------------$.ajax 是在jquery.min里的jquery是没有的
1.$.ajax()方法概述
$.ajax({
type: 'get',
url: 'http://www.example.com',
data: { name: 'zhangsan', age: '20' },
contentType: 'application/x-www-form-urlencoded',--------默认
beforeSend: function () {
return false
},
success: function (response) {},
error: function (xhr) {}
});
2.serialize方法
作用:将表单中的数据自动拼接成字符串类型的参数
var params = $('#form').serialize();
// name=zhangsan&age=30
3.$.get()、$.post()方法概述
作用:$.get方法用于发送get请求,$.post方法用于发送post请求。
$.get('http://www.example.com', {name: 'zhangsan', age: 30}, function (response) {})
$.post('http://www.example.com', {name: 'lisi', age: 22}, function (response) {})
4.jQuery中Ajax全局事件
只要页面中有Ajax请求被发送,对应的全局事件就会被触发
.ajaxStart() // 当请求开始发送时触发
.ajaxComplete() // 当请求完成时触发
-----NProgress
引入:
<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>
使用:
NProgress.start(); // 进度条开始运动
NProgress.done(); // 进度条结束运动
...........等等等
5.RESTful API 概述
GET: 获取数据
POST: 添加数据
PUT: 更新数据
DELETE: 删除数据
----RESTful API 的实现
GET:http://www.example.com/users 获取用户列表数据
POST:http://www.example.com/users创建(添加)用户数据
GET:http://www.example.com/users/1获取用户ID为1的用户信息
PUT:http://www.example.com/users/1修改用户ID为1的用户信息
DELETE:http://www.example.com/users/1删除用户ID为1的用户信息
6.XML
XML 的全称是 extensible markup language,代表可扩展标记语言,它的作用是传输和存储数据。
<students>
<student>
<sid>001</sid>
<name>张三</name>
</student>
<student>
<sid>002</sid>
<name>王二丫</name>
</student>
</students>
--XML DOM
XML DOM 即 XML 文档对象模型,是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。
如果是XML数据,就不能使用xhr.response来获取数据,要使用xhr.responseXML来获取,这样可以发送一个document文档过来而不是一整串字符串
XML DOM可以进行与DOM差不多的操作
var xmlDocument = xhr.responseXML;
var title = xmlDocument.getElementsByTagName('title')[0].innerHTML;
3.jsonp
经验
1.
var fnName ='myJsonp' +Math.random().toString().replace('.','') 函数名不能是纯数字
window.fn=options.success
但是如果想要给函数名随机取名就需要替换fn,但是window.后面不能是变量而应该是值,如 window.fnName 是不行的
所以需要 window[fnName]=options.success
2.
res.jsonp其实就是进行以下操作,没有定时函数,直接res.send
const fnName = req.query.callback
const data={name: "张三"}
const result = fnName+'('+JSON.stringify(data)+')'
setTimeout(()=>{
res.send(result)
},1000)
3.
res.header('Access-Control-Allow-Methods','get') 只能通过app.get或app.post 设置拦截不然好像没用
4.$.ajax()中,如果服务端需要一个JSON对象就应该contentType:'application/json',且
data:JSON.stringify(params), 因为如果不加JSON的话,data会自动把数据转换成JSON字符串然后发送出去
5.beforeSend Send是的S大写