首页 技术 正文
技术 2022年11月23日
0 收藏 379 点赞 2,802 浏览 3142 个字

Ajax 是什么?

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)是指一种创建交互式网页应用的网页开发技术。
它由以下几种技术组合而成,包括:

  • HTML/XHTML——主要的内容表示语言。
  • CSS——为XHTML提供文本格式定义。
  • DOM——对已载入的页面进行动态更新。
  • XML——数据交换格式。
  • XSLT——将XML转换为XHTML(用CSS修饰样式)。
  • XMLHttp——用XMLHttpRequest来和服务器进行异步通信,是主要的通信代理。
  • JavaScript——用来编写Ajax引擎的脚本语言。

在Ajax解决方案中,HTML/XHTML、DOM以及JavaScript是必须的。大概分为三个过程:

  • 使用XMLHttpRequest发请求
  • 服务器返回XML格式字符串
  • JS解析XML并更新局部变量

XMLHttpRequest对象

当需要异步与服务器交换数据时,需要XMLHttpRequest对象来异步交换。XMLHttpRequest对象的主要属性有:

  • onreadystatechange——每次状态改变所触发事件的事件处理程序。
  • responseText——从服务器进程返回数据的字符串形式。
  • responseXML——从服务器进程返回的DOM兼容的文档数据对象。
  • status——从服务器返回的数字代码,状态码如404(未找到)和200(已就绪)。
  • status Text——伴随状态码的字符串信息。
  • readyState——对象状态值。对象状态值有以下几个:
    0 – (未初始化)还没有调用send()方法
    1 – (载入)已调用send()方法,正在发送请求
    2 – (载入完成)send()方法执行完成
    3 – (交互)正在解析响应内容
    4 – (完成)响应内容解析完成,可以在客户端调用了
    对于readyState的状态值,其中“0”状态是默认状态值,而对于成功访问的状态(得到信息)我们大多数采用“4”进行判断

Ajax的核心就是是JavaScript对象XmlHttpRequest,这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。


XMLHttpRequest对象用法

XMLHttpRequest对象有两个重要方法 open与send

 let request = new XMLHttpRequest()
request.open('GET','/xxx') // 配置request
request.send()

open方法:

URL是相对于当前页面的路径,也可以似乎用绝对路径。open方法不会向服务器发送真正请求,它相当于初始化请求并准备发送。只能向同一个域中使用相同协议和端口的URL发送请求,否则会因为安全原因报错。

在发送同步请求的时候没问题,只有得到响应后才会执行检查status语句,但是在异步请求时,JavaScript会继续执行,不等生成响应就检查状态码,这样我们不能保证检查状态码语句是在得到响应后执行,这时候我们可以检查request对象的readyState属性,该属性表示请求/响应过程中的当前活动阶段,每当readyState值改变的时候都会触发一次onreadystatechange事件。

  request.onreadystatechange = function(){
if(request.readyState===4){
if(request.status>=200 && request.status<300){
let string = request.responseText
// 把符合 JSON 语法的字符串转换成 JS 对应的值
let object = window.JSON.parse(string)
}else if(request.status >= 400){
console.log('说明请求失败')
}
}
}

CORS(跨源资源共享)

CORS(Cross-Origin Resource Sharing)允许浏览器向跨源(协议 + 域名 + 端口)服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
同源策略 : 只有协议+端口+域名 一模一样的才允许发AJAX请求。AJAX可以读取响应内容。
突破同源策略 === 跨域
CORS将导致跨域访问的请求分为三种:Simple Request(请求没有包含任何自定义请求头),Preflighted Request(请求包含了任何自定义请求头)以及Requests with Credential(跨域请求包含了当前页面的用户凭证)。

//响应头用来记录可以访问该资源的域 ,它的值要么是请求时Origin字段的具体值,要么是一个*,表示接受任意域名的请求。
('Access-Control-Allow-Origin':,'*')



原生 JS 写出AJAX 请求

  let request = new XMLHttpRequest()
request.open('get','/xxx')
request.send() request.onreadystatechange = function(){
if(request.readyState===4){
if(request.status>=200 && request.status<300){
let string = request.responseText
let object = window.JSON.parse(string)
}else if(request.status >= 400){
console.log('说明请求失败')
}
}
}

jQuery.ajax封装代码链接

window.jQuery = function(nodeOrSelector){
let nodes = {}
nodes.addClass = function(){}
nodes.html = function(){}
return nodes
}
window.$ = window.jQuery
window.jQuery.ajax = function({url,method,body,headers}){
return new Promise(function(resolve,reject){
let request = new XMLHttpRequest()
request.open(method,url)
for(let key in headers){
let value = headers[key]
requeq.setRequestHeader(key,value)
}
request.onreadystatechange = ()=>{
if(request.readyState===4){
if(request.status >=200 && request.status <300){
resolve.call(undefined,request.responseText)
}else if(request.status >= 400){
reject.call(undefined,request)
}
}
}
request.send(body)
})
}myButton.addEventListener('click',(e)=>{
window.jQuery.ajax({
url: '/xxx',
method: 'get',
headers:{
'content-type':'application/x-www-form-urlencoded',
'frank': '18'
},
}).then(
(text)=>{console.log(text)},
(request)=>{console.log(request)},
)
})

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/140949.html

下一篇: Docker技术
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站