AJAX是什么

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

Ajax是一种创建交互式网页应用的网页开发技术,当需要从服务器获取数据，并刷新页面的操作，如果不采用AJAX，则需要用提交整个表单的方式，当提交表单时，发送请求给服务器，页面需要等待服务器发送完response后，页面才能恢复操作。

Ajax基本使用

1. 实例化Ajax对象var xhr = new XMLHttpRequest();

2. 配置ajax请求xhr.open(request-type,url,asynch)

• request-type：【必选】请求类型 get post put delete

• url：【必选】请求地址

• asynch：【可选】请求方式 同步请求 false、异步请求 true 该参数是可选的，默认为 true

1. 发送ajax请求xhr.send()

2. 监听Ajax状态(获取响应结果)当ajax请求状态发生变化，会触发该事件xhr.onreadystatechange = function(){ // 当xhr状态 == 4 响应内容解析完成，可使用 if(xhr.readyState == 4){ // http响应状态 if(xhr.status == 200){ // 获取响应结果 xhr.response } }}

• 请求状态 xhr.readyState（未初始化）还没有调用send()方法 （正在载入）已调用send()方法，正在发送请求 （载入完成）send()方法执行完成，已经接收到全部响应内容 （交互中）正在解析响应内容 （完成）响应内容解析完成，可以在客户端调用了

案例：

1. ajax发送get请求

   ajax请求需要发送参数？xhr.open("get","URL/xxx?key=val&key=val&..")

2. ajax发送post请求ajax用post请求提交数据，可使用两种格式：

   1. application/x-www-form-urlencoded 字符串key=val&key=val&....POST xhr.send(urlencoded)必须在send之前，设置请求头 content-type：xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

   2. multipart/form-data 字符串/文件var fd = new FormData();fd.append(key,val)POST xhr.send(formdata)

Ajax基本使用

1. 实例化Ajax对象var xhr = new XMLHttpRequest();

2. 配置ajax请求xhr.open(request-type,url,asynch)

• request-type：【必选】请求类型 get post put delete

• url：【必选】请求地址

• asynch：【可选】请求方式 同步请求 false、异步请求 true 该参数是可选的，默认为 true

1. 发送ajax请求xhr.send()

2. 监听Ajax状态(获取响应结果)当ajax请求状态发生变化，会触发该事件xhr.onreadystatechange = function(){ // 当xhr状态 == 4 响应内容解析完成，可使用 if(xhr.readyState == 4){ // http响应状态 if(xhr.status == 200){ // 获取响应结果 xhr.response } }}

• 请求状态 xhr.readyState（未初始化）还没有调用send()方法 （正在载入）已调用send()方法，正在发送请求 （载入完成）send()方法执行完成，已经接收到全部响应内容 （交互中）正在解析响应内容 （完成）响应内容解析完成，可以在客户端调用了

案例：

1. ajax发送get请求

   ajax请求需要发送参数？xhr.open("get","URL/xxx?key=val&key=val&..")

2. ajax发送post请求ajax用post请求提交数据，可使用两种格式：

   1. application/x-www-form-urlencoded 字符串key=val&key=val&....POST xhr.send(urlencoded)必须在send之前，设置请求头 content-type：xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

   2. multipart/form-data 字符串/文件var fd = new FormData();fd.append(key,val)POST xhr.send(formdata)

封装Ajax

设计Ajax程序：

1. 封装为函数 ajax

2. ajax函数的参数请求类型 method GET(默认) POST PUT Delete请求地址 url请求方式 async true 同步请求 false、异步请求 true请求数据 data qs, formdata, {}请求成功 success function(data){}请求失败 fail function(){}响应结果类型 dataType 'text','json'

3. 思路围绕着 ajax 4步操作1> 参数验证、默认值处理2> 实例化 var xhr = new XMLHttpRequest();3> 配置参数 请求类型不同，对应不同配置 get URL post 请求体 send() put 请求体 send() delete URL 4> 发送 send() 5> 响应

   1. 根据响应结果 调用 对应回调函数

   2. 根据dataType 返回对应类型数据 success(data)xhr.onreadystatechange = function(){

   }

jQuery中ajax

$.ajax({ url: "", type: "get|post|put|delete", async: true | false,

contentType: "application/x-www-form-urlencoded",

data:Object|String, dataType: "xml"|"html"|"script"|"json"|"jsonp"|"text",                      error:function(XMLHttpRequest, textStatus, errorThrown){},

success:function(data, textStatus, jqXHR){}})