ajax

原生创建ajax的五个步骤

代码引自https://www.cnblogs.com/0x29a/p/11231950.html

1.创建XMLHttpRequest异步对象

var xhr = new XMLHttpRequest()

2.设置回调函数

xhr.onreadystatechange = callback

3.使用open方法与服务器简历连接

//get方式
xhr.open('get','text.php',true)
//post方式，要设置请求头
xhr.open('post','test.php',true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

4.发送数据

// get方法不需要传递数据
xhr.send(null)
// post 需要传递数据
xhr.send('name=xxx&age=18')

5. 在回调函数中针对不同的响应状态进行处理

function callback(){
      // 判断异步对象的状态
    if (xhr.readyState == 4) {
          // 判断交互是否成功
          if (xhr.status == 200) {
              // 获取服务器响应的数据
              var res = xhr.responseText
                // 解析数据
              res = JSON.parse(res)
          }
    }

}

jquery中的ajax

代码引自 https://www.cnblogs.com/enumx/p/12326676.html

$.ajax({
	type:'POST', // 规定请求的类型（GET 或 POST）
	url:uploadV, // 请求的url地址
	dataType:'json', //预期的服务器响应的数据类型 
	data:{},//规定要发送到服务器的数据
	beforeSend:function(){ //发送请求前运行的函数（发送之前就会进入这个函数）
		// ....
	},
	success: function(result){ // 当请求成功时运行的函数
		//...
	},
	error:function(result){ //失败的函数
		//...
	},
	complete:function(){ //请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后，不管成功还是失败 都会进这个函数）
		// ...
	}
});

async	布尔值，表示请求是否异步处理。默认是 true。
beforeSend(xhr)	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true
complete(xhr,status)	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）
contentType	发送数据到服务器时所使用的内容类型。默认是：”application/x-www-form-urlencoded”。
context	为所有 AJAX 相关的回调函数规定 “this” 值。
password	规定在 HTTP 访问认证请求中使用的密码。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
jsonp	在一个 jsonp 中重写回调函数的字符串。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
dataType	预期的服务器响应的数据类型。
error(xhr,status,error)	如果请求失败要运行的函数。
dataFilter(data,type)	用于处理 XMLHttpRequest 原始响应数据的函数。
data	规定要发送到服务器的数据。
url	规定发送请求的 URL。默认是当前页面。
type	规定请求的类型（GET 或 POST）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
timeout	设置本地的请求超时时间（以毫秒计）。
success(result,status,xhr)	当请求成功时运行的函数。
scriptCharset	规定请求的字符集。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true
xhr	用于创建 XMLHttpRequest 对象的函数
username	规定在 HTTP 访问认证请求中使用的用户名。

XMLHttpRequest取得相应

• responseText:获得字符串形式的响应数据
• responseXML：获得xml形式的响应数据
• status和statusText：以数字和文本形势返回http转态码
• getAllResponseHeader():获得所有的相应
• getResponseHeader()：查询相应中的某个字段的值
• readState属性

readystate的五种返回值所代表的意义：

• 0（未初始化） 还没调用open（）方法
• 1（载入）已经调用send方法(),正在发送请求
• 2（载入完成）send（）方法已经完成，已收到相应
• 3（解析）正在解析响应内容
• 4（完成）相应内容解析完成，可在客户端调用。

ajax中status几种常态说明：

• 100——客户必须继续发出请求
• 101——客户要求服务器根据请求转换HTTP协议版本
• 200——成功
• 201——提示知道新文件的URL
• 300——请求的资源可在多处得到
• 301——删除请求数据
• 404——没有发现文件、查询或URl
• 500——服务器产生内部错