Ajax 请求数据
发布日期:2022-02-22 16:04:47 浏览次数:14 分类:技术文章

本文共 2471 字,大约阅读时间需要 8 分钟。

Ajax ( asynchronous javascript and xml(json) ) 是一种在无需加载整个网页的情况下能够更新部分网页的技术。

  • 原理:Ajax 是 JavaScript 基于 XMLHttpRequest 对象与服务端进行交互,向服务端发送一个请求,并且获取和处理服务器返回的内容。

XHR对象和web服务器进行数据的异步交换

一、创建XHR对象(Ajax对象)
var xhr= new XMLHttpRequest();//IE5,IE6 不支持

兼容性写法:

var request = null;if(window.XMLHttpRequest){
   
request = new XMLHttpRequest();}else{    
request = new ActiveXObject('Microsoft.XMLHTTP');// IE5 , IE6}
二、XHR对象发送HTTP请求
xhr.open(method,url,async) // 建立http连接,使用method方式向url同步/异步请求数据
  • method:get | post 不区分大小写;
  • url:文件路径/文件名(服务器地址)
    当为 文件路径/文件名/?属性名=属性值&属性名=属性值 时,传递数据 ,需要后台接收
  • async: true 异步请求(默认) | false 同步请求

在发送请求之前可以设置请求头信息

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
xhr.send(string) // 将请求发送到服务器上
  • string:请求参数对象。GET请求:可以不写参数或null;POST请求需需要携带请求体
xhr.abort();// 中止请求  调用这个方法以后,readyState属性变为4,status属性变为0

withCredenticals :表示跨域请求时,用户信息(比如 Cookie 和认证的 HTTP 头信息)是否会包含在请求之中,默认为false。

客户端设置请求头允许携带cookie:xhr.withCredenticals = true;服务端必须显示返回:Access-Control-Allow-Credentials: true
三、XHR获取服务器的响应

属性

  • responseText:获得字符串形式的响应数据

  • responseXML:获得XML形式的响应数据

  • status 和statusText:以数字和文本形式返回HTTP状态码

  • getAllResponseHeader():获取所有的响应报头

  • getResponseHeader():查询响应中的某个字段的值

  • readyState属性,指通信状态,属性值的变化代表服务器响应的变化
    0:请求未初始化,open还没有调用
    1:服务器连接已建立,已调用send(),正在发送请求
    2:请求已接收,send()方法执行完成,已经接受到全部响应内容
    3:请求处理中,正在解析响应内容
    4:请求已完成,响应内容解析完成

  • status属性
    200, OK,访问正常
    301, Moved Permanently,永久移动
    302, Moved temporarily,暂时移动
    304, Not Modified,未修改
    307, Temporary Redirect,暂时重定向
    401, Unauthorized,未授权
    403, Forbidden,禁止访问
    404, Not Found,未发现指定网址
    500, Internal Server Error,服务器发生错误

事件

  • onreadystatechange事件监听xhr对象上的readyState属性的变化,即监听服务器的响应
  • onabort事件:请求中止
  • onerror事件:请求失败
  • onload 事件:请求成功完成
  • ontimeout事件:请求超时
request.onreadystatechange = function(){
   
if(request.readyState === 4 && request.status === 200){    
//响应完成且请求成功
request.responseText //获取服务器响应的内容
}}

手写一个Ajax,不依赖第三方库

var xhr = new XMLHttpRequest();xhr.open("GET","/api",false);// true 异步 ; false 同步//状态码改变触发 readystatechange事件xhr.onreadystatechange = function(){
   
if(xhr.readyState == 4){    
if(xhr.status == 200){    
//当状态为4并且状态码为200时 成功。
alert(xhr.responseText);
}
}}xhr.send(null);

IE兼容问题:IE低版本使用ActiveXObject,和W3C标准不同

jQuery实现Ajax

jQuery.ajax({
   
type:GET(默认) | post,
//在jQuery1.9以后的版本中使用ajax时,可以使用method替换type属性
url:''//请求地址,
data:{    key:value} ,//请求参数
dataType:'json',//预期服务器返回的数据类型。如果不指定jQuery将自动根据HTTP包MIME信息来智能帕努单,一般采用json格式。
success:(res)=>{    },
error:(jqXHR)=>{    }//第一个参数为jQuery的XHR对象})

Ajax 之旅就结束啦,文中若有错误请及时指出并联系,不胜感激!

转载地址:https://blog.csdn.net/Conradine_Lian/article/details/107222510 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:MySQL数据库知识概览
下一篇:Vue知识点梳理(思维导图版)

发表评论

最新留言

表示我来过!
[***.67.29.72]2022年09月30日 06时56分25秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章