liaooo

标签： AJAX

  • jQuery中的AJAX

    GET

    $.get(url,[data],[callback])

    url：请求地址

    data：请求时携带的参数

    callback：请求成功的回调函数

    $.get('https://api.liaooo.cn/api', { id: 1, name: 2 }, function (result) {})

    POST

    $.post(url,[data],[callback])

    url：请求地址

    data： 要提交的数据

    callback：请求成功的回调函数

    通过$.ajax()发送请求

    $.ajax(url,[settings])

    $.ajax({
	type: 'GET',	//请求方式
	url: 'https://api.liaooo.cn/api', //请求的URL地址
	data: { id: 1, name: 2 }, //请求携带的数据
	success: function(result){ }, //请求成功回调
})

    https://jquery.cuishifeng.cn/jQuery.Ajax.html

  • AJAX

    1.创建一个实例化对象

    new XMLHttpRequest()

    let xhr = new XMLHttpRequest()

    2.设置请求信息

    xhr.open(method, url);

    *.设置请求头

    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    3.发送请求

    xhr.send(body)

    get 请求不传 body 参数，只有 post 请求使用

    4.接收响应

    xhr.responseXML 接收 xml 格式的响应数据

    xhr.responseText 接收文本格式的响应数据

    xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text); }
}

    IE缓存问题

    在IE中，ajax的同一请求只会请求一次，重复请求会加载缓存的数据

    解决方法

    浏览器缓存根据url记录，动态更新url即可避免

    可在请求url后面加随机数、时间戳等

    xhr.open("get","/testAJAX?t="+Date.now());

    属性

    当 readyState 属性发生变化时

    xhr.onreadystatechange

    也可使用addEventListener()来监听

    请求的状态码

    xhr.readyState

    • 0: 表示 XMLHttpRequest 实例已经生成，但是open()方法还没有被调用
    • 1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息
    • 2: 表示 send()方法已经执行，并且头信息和状态码已经收到
    • 3: 表示正在接收服务器传来的 body 部分的数据
    • 4: 表示服务器数据已经完全接收，或者本次接收已经失败了（请求完成，不一定成功）

    响应体

    xhr.response xhr.responseText

    定义响应类型

    xhr.responseType

    值text、json等

    响应状态

    xhr.status

    返回状态码 例： 200

    最大请求时间（毫秒）

    xhr.timeout

    若超出该时间，请求会自动终止。

    请求超时调用

    xhr.ontimeout

    也可使用addEventListener()来监听

    方法

    中止请求

    xhr.abort()

    获得响应头

    xhr.getResponseHeader()

    初始化一个请求

    xhr.open()

    设置 HTTP 请求头的值

    必须在 open() 之后、send() 之前调用

    xhr.setRequestHeader()

    发送请求

    xhr.send()

    事件

    当请求被停止时触发

    abort

    当请求遭遇错误时触发

    error

    请求成功完成时触发

    load

    在预设时间内没有接收到响应时触发

    timeout