一. $.ajax()方法概述
作用:发送Ajax请求
1 $.ajax({ 2 type: ‘get‘, //请求方式 3 url: ‘http://www.example.com‘,//请求地址 4 data: { name: ‘zhangsan‘, age: ‘20‘ },//或{data:‘name=zhangsan&age=20‘} //请求参数
5 contentType: ‘application/x-www-form-urlencoded‘,//参数格式 也可以是{ontentType: ‘application/json‘},参数对应json字符串格式JSON.stringify({name: ‘zhangsan‘, age: ‘20‘}) 6 beforeSend: function () { 7 return false 8 },
//请求成功后函数被调用 9 success: function (response) {},//方法内部会自动将json字符串转换为json对象 10 error: function (xhr) {} 11 });
作用:发送jsonp请求
1 $.ajax({ 2 url: ‘/jsonp‘, 3 // 向服务器端传递函数名字的参数名称 4 jsonp: ‘cb‘, 5 jsonpCallback: ‘fn‘, 6 // 代表现在要发送的是jsonp请求 7 dataType: ‘jsonp‘, 8 success: function (response) { 9 console.log(response) 10 } 11 })
二.serialize方法
作用:将表单中的数据自动拼接成字符串类型的参数
var params = $(‘#form‘).serialize(); // name=zhangsan&age=30
三.$.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全局事件
1.全局事件
只要页面中有Ajax请求被发送,对应的全局事件就会被触发
.ajaxStart() // 当请求开始发送时触发
.ajaxComplete() // 当请求完成时触发
2.NProgress
官宣:纳米级进度条,使用逼真的涓流动画来告诉用户正在发生的事情
NProgress.start(); // 进度条开始运动
NProgress.done(); // 进度条结束运动
<link rel=‘stylesheet‘ href=‘nprogress.css‘/>
<script src=‘nprogress.js‘></script>
1 // 当页面中有ajax请求发送时触发 2 $(document).on(‘ajaxStart‘, function () { 3 NProgress.start() 4 }) 5 6 // 当页面中有ajax请求完成时触发 7 $(document).on(‘ajaxComplete‘, function () { 8 NProgress.done() 9 })
五.RESTful 风格的 API
RESTful API 概述
一套关于设计请求的规范
- GET: 获取数据
- POST: 添加数据
- PUT: 更新数据
- DELETE: 删除数据
RESTful API 的实现
六.XML 基础
XML是什么
XML 的全称是 extensible markup language,代表可扩展标记语言,它的作用是传输和存储数据。
XML DOM
XML DOM 即 XML 文档对象模型,是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型