原生ajax请求超时处理,关于原生AJAX
一、原生AJAX基础知识
(一)描述
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
通过在后台与服务器进行少量的数据交换,AJAX可以使网页实现异步更新——在不重新加载整个网页的情况下,对网页的某部分进行更新
(二)工作原理
(三)浏览器发送请求
GET请求
xhr.open("GET", "data/a.text", true)
xhr.send()
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
send(string)
将请求发送到服务器
string:仅用于 POST 请求
POST请求——修改请求头
xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("content-type","application/x-www-urlencoded");
xhr.send("fname=Henry&lname=Ford")
setRequestHeader(header,value)
向请求添加 HTTP 头
header: 规定头的名称
value: 规定头的值
异步
XMLHttpRequest 对象使用 AJAX,open() 方法的 async 参数必须设置为 true
通过 AJAX,JavaScript 无需等待服务器的响应
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
(四)服务器创建响应
获取服务器数据响应使用XMLHttpRequest对象的responeseText和responseXML属性
responseText——获得字符串形式的响应数据
responseXML——获得 XML 形式的响应数据,作为 XML 对象进行解析
(五)浏览器处理响应
onreadyStateChange事件
处理服务器响应,需要先监听请求的状态,当响应准备就绪开始处理
每当 readyState 改变时,就会触发 onreadystatechange 事件
readyState 属性存有 XMLHttpRequest 的状态信息
属性
描述
onreadyStateChange
存储函数,每当readyState属性改变,调用该函数
readyState
存有 XMLHttpRequest 的状态
0:请求未初始化——未调用open()
1:请求连接已经建立——未调用send()
2:请求已发送
3:请求处理中
4:请求已完成,响应准备就绪
status
200: "OK"
404: "Not Found"
(六)AJAX原生JS操作
//1.创建Ajax实例
let xhr = new XMLHttpRequest();//IE下为ActiveObject对象
//2.设置请求配置
xhr.open("GET", "data/a.text", true)
//3.事件监听:通过监听readyStateChange事件,获知AJAX状态改变
xhr.onreadyStateChange = function() {
//请求完成 获取服务器返回的响应头响应主体
if(xhr.readyState == 4 && xhr.status == 200 ) {
console.log(xhr.responseText)
}
}
//4.发送Ajax请求
xhr.send()
创建 XMLHttpRequest 对象——let xhr = new XMLHttpRequest()
规定请求的类型、URL与异步——xhr.open("GET", url, true)
当服务器响应就绪时执行函数——xhr.onreadyStateChange = callback
发送请求到服务器——xhr.send()
二、jQuery.ajax
$.ajax(url, [settings])
(一)描述
通过 HTTP 请求加载远程数据
$.ajax() 返回其创建的 XMLHttpRequest 对象
$.ajax({
type: "GET",//请求类型
url:"test.html",//发送请求的地址
data: "",//发送到服务器的数据。将自动转换为请求字符串格式
dataType: "html",//预期服务器返回的数据类型
async: true,//请求是否异步,默认为异步
headers: {},//设置消息头中的值
timeout: "",//设置请求超时时间(毫秒)
beforeSend: function(XMLHttpRequest) {
//请求前的处理——可修改XMLHttpRequest对象,如自定义请求头
},
success: function(data, status) {
//请求成功时处理
},
complete: function(XMLHttpRequest, status) {
//请求完成的处理
},
error: function() {
//请求出错处理
}
})
原文:https://www.cnblogs.com/zengbin13/p/12905303.html
原生ajax请求超时处理,关于原生AJAX相关推荐
- ajax请求如何判断超时,ajax请求超时判断(转载)
ajax请求时有个参数可以借鉴一下 var ajaxTimeOut = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : ' ...
- jQuery ajax请求两次问题,jquery ajax请求了两次问题
页面有一个请求form: 订单编号 用户帐户 发货状态 请选择 未发送 已发送 查询 JavaScript请求部分: function showdatalist() { var username = ...
- html ajax请求怎么用,如何使用ajax,ajax请求的五个步骤
有很多童鞋,在WEB前端面试的时候,常会被Ajax问题难住,其实Ajax没有你们理解的那么难,现在源码时代H5学科讲师带着大家重新来回顾一下知识点:随便再给大家普及一下小常识,今天咱们聊的就是怎么快速 ...
- jq ajax请求php原声,原生JS与jQuery对AJAX的实现
原生JS与jQuery对AJAX的实现 一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). ...
- Ajax 请求超时与网络异常
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 为什么ajax请求状态码为0,ajax请求状态码为0的解决办法
原文链接:https://blog.csdn.net/changqing5818/article/details/53932463 前言 今天遇到个奇怪的问题,使用JQuery的ajax请求,后台的C ...
- shiro处理ajax请求未登录,shiro处理ajax请求session失效跳转
最近在学习shiro时遇到一个问题,在ajax请求时,若是session失效时,没法正确的跳转登陆页面.在以前的项目中处理的方法是经过自定义一个过滤器来处理,session失效时返回错误码来处理.但由 ...
- ajax 请求_前端后分离Ajax跨域请求保证Session一致
JAVA码牛牛,程序员学习指南 前后端分离的项目,使用Ajax请求一般都出现跨域的问题. 跨域的时候所创建的session是不会被浏览器保存下来的.所以每次进行跨域请求时,服务器都认为不是同一个浏览器 ...
- java判断ajax请求_判断Httprequest 是否ajax 请求的方法
在写后台程序时,有时候需要知道客户端发送的是普通的请求,还是ajax 请求,至少在我目前所做的项目中有这样一个用途:如果session 过期的时候,如果是普通请求,跳转到登录页面,但如果是ajax 请 ...
- ajax请求获取服务器数据,jquery.ajax发布从app引擎服务器获取数据的请求
为noob问题道歉...... 您好,如何使用jQuery.ajax从appengine服务器的Python端获取数据?我知道如何使用ajax和适当的处理程序将数据发送到服务器,但我想知道是否有人可以 ...
最新文章
- SqlServerManagement新建数据库并执行sql文件流程
- wpf判断一个窗体是否运行_算法8 判断一个数是否是回文数
- 【深度学习】什么是深度学习-2
- 使用PowerShell脚本部署定时器到MOSS2010(原创)
- arduino cc3000 php,【arduino】新手求助, 想问一下关於CC3000设置的问题
- eclipse汉化(傻瓜式)
- Win10设置定时关机命令简单介绍
- Python使用Reportlab处理PDF数据 - 创建特殊功能
- nmn产品品牌,nmn产品哪家更靠谱,看完不花冤枉钱
- 客户成功的起源——SaaS(软件即服务)
- 用Threejs做一只会动的3D玉兔祝大家中秋快乐
- 传销三级的认定标准_主观明知在传销犯罪中有那么重要吗?
- C# wherewhereif
- android P有哪些小米手机,Android P来啦!开发者版支持七款机型 OV小米一加在列
- 【第40期】不可错过的数据挖掘好书
- 让你的高清监控摄像头,轻松实现在微信公众号直播
- 微信小程序在wxml页面中截取字符串
- 9款经典华丽的CSS3分享按钮
- 一个完整决策树的构建案例
- RIP---综合实验