ajax

Posted on | In | | 次阅读

原生创建ajax的五个步骤

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

1.创建XMLHttpRequest异步对象

1
var xhr = new XMLHttpRequest()

2.设置回调函数

1
xhr.onreadystatechange = callback

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

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

4.发送数据

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.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——服务器产生内部错
-------------本文结束感谢您的阅读-------------