jQuery 中的 Ajax
$.ajax()
$.ajax()办法概述
作用：发送Ajax申请。
$.ajax({ type: 'get', url: 'http://www.example.com', data: { name: 'zhangsan', age: '20' }, //data: 'name=zhangsan&age=20' contentType: 'application/x-www-form-urlencoded', //contentType: 'application/json' beforeSend: function () { return false }, success: function (response) {}, error: function (xhr) {}});beforeSend办法阐明
$.ajax({ // 申请形式 type: 'post', // 申请地址 url: '/user', // 在申请发送之前调用 beforeSend: function () { alert('申请不会被发送') // 申请不会被发送 return false; }, // 申请胜利当前函数被调用 success: function (response) { // response为服务器端返回的数据 // 办法外部会主动将json字符串转换为json对象 console.log(response); }})作用：发送jsonp申请。
$.ajax({ url: 'http://www.example.com', // 指定以后发送jsonp申请 dataType: 'jsonp', // 批改callback参数名称 jsonp: 'cb', // 指定函数名称 jsonCallback: 'fnName', success: function (response) {} })serialize办法
作用：将表单中的数据主动拼接成字符串类型的参数
var params = $('#form').serialize();// name=zhangsan&age=30$.get()、$.post
$.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) {})jQuery中Ajax全局事件
只有页面中有Ajax申请被发送，对应的全局事件就会被触发
.ajaxStart() // 当申请开始发送时触发.ajaxComplete() // 当申请实现时触发NProgress
官宣：纳米级进度条，应用真切的涓流动画来通知用户正在产生的事件！
<link rel='stylesheet' href='nprogress.css'/><script src='nprogress.js'></script>NProgress.start(); // 进度条开始静止 NProgress.done(); // 进度条完结静止RESTful 格调的 API
传统申请地址回顾
GET http://www.example.com/getUsers // 获取用户列表GET http://www.example.com/getUser?id=1 // 比方获取某一个用户的信息POST http://www.example.com/modifyUser // 批改用户信息GET http://www.example.com/deleteUser?id=1 // 删除用户信息RESTful API 概述
一套对于设计申请的标准。
GET： 获取数据
POST： 增加数据
PUT： 更新数据
DELETE： 删除数据
RESTful API 的实现
每一个申请地址都要对应资源
users => /users
articles => /articles
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的用户信息
留神：传统的html表单提交不反对put和delete，在Ajax中反对
服务器端:
// 获取用户列表信息app.get('/users', (req, res) => { res.send('以后是获取用户列表信息的路由');});// 获取某一个用户具体信息的路由app.get('/users/:id', (req, res) => { // 获取客户端传递过去的用户id const id = req.params.id; res.send(`以后咱们是在获取id为${id}用户信息`);});// 删除某一个用户app.delete('/users/:id', (req, res) => { // 获取客户端传递过去的用户id const id = req.params.id; res.send(`以后咱们是在删除id为${id}用户信息`);});// 批改某一个用户的信息app.put('/users/:id', (req, res) => { // 获取客户端传递过去的用户id const id = req.params.id; res.send(`以后咱们是在批改id为${id}用户信息`);});客户端：
<script type="text/javascript"> // 获取用户列表信息 $.ajax({ type: 'get', url: '/users', success: function (response) { console.log(response) } }) // 获取id为1的用户信息 $.ajax({ type: 'get', url: '/users/1', success: function (response) { console.log(response) } }) // 删除id为10的用户信息 $.ajax({ type: 'delete', url: '/users/10', success: function (response) { console.log(response) } }) // 批改id为1的用户信息 $.ajax({ type: 'put', url: '/users/10', success: function (response) { console.log(response) } })</script>XML 根底
XML是什么
XML 的全称是 extensible markup language，代表可扩大标记语言，它的作用是传输和存储数据。
<students> <student> <sid>001</sid> <name>张三</name> </student> <student> <sid>002</sid> <name>王二丫</name> </student> </students>app.get('/xml', (req, res) => { res.header('content-type', 'text/xml'); res.send('<message><title>音讯题目</title><content>音讯内容</content></message>')});XML DOM
XML DOM 即 XML 文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。
btn.onclick = function () { var xhr = new XMLHttpRequest(); xhr.open('get', '/xml'); xhr.send(); xhr.onload = function () { // xhr.responseXML 获取服务器端返回的xml数据 var xmlDocument = xhr.responseXML; var title = xmlDocument.getElementsByTagName('title')[0].innerHTML; container.innerHTML = title; }}