Ajax异步请求原理和过程
Ajax异步请求原理和过程
- 1.什么是Ajax
- 2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 )
- 3.操作XMLHttpRequest 对象
1.什么是Ajax
Ajax是一种异步请求数据的web开发技术,对于改善用户的体验和页面性能很有帮助。简单地说,在不需要重新刷新页面的情况下,Ajax 通过异步请求加载后台数据,并在网页上呈现出来。
2.AJAX创建异步对象XMLHttpRequest ( 考虑兼容性 )
AJAX 的要点是 XMLHttpRequest 对象。
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的,IE浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
例如:
var xhr=null; if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest();} else{// 兼容 IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }
3.操作XMLHttpRequest 对象
(1)设置请求参数(请求方式,请求页面的相对路径,是否异步)
xhr.open(method,url,async); send(string);//post请求时才使用字符串参数,否则不用带参数。
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
注意:post请求一定要设置请求头的格式内容,get请求的参数拼接在url后面
(2)设置回调函数,一个处理服务器响应的函数,使用 onreadystatechange ,类似函数指针,如
xhr.onreadystatechange=function(){// 相应的执行代码}
(3)获取异步对象的readyState 属性
该属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
readyState 属性可能的值:
0:未初始化 – 尚未调用.open()方法;
1:启动 – 已经调用.open()方法,但尚未调用.send()方法;
2:发送 – 已经调用.send()方法,但尚未接收到响应;
3:接收 – 已经接收到部分响应数据;
4:完成 – 已经接收到全部响应数据,而且已经可以在客户端使用了;
在调用时,我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):
xhr.onreadystatechange=function(){if(xhr.readyState==4){// 从服务器的response获得数据}}
(4)判断响应报文的状态,若为200说明服务器正常运行并返回响应数据,
(5)读取响应数据,可以通过 responseText 属性来取回由服务器返回的数据。
xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){document.myForm.time.value=xmlHttp.responseText;}}}
整体示例如下:
<form name="myForm"> 用户: <input type="text" name="username" onkeyup="ajaxFunction();" /> 时间: <input type="text" name="time" />
</form> function ajaxFunction(){var xhr=null; //定义XMLHttpRequest对象if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest();} else{// 兼容 IE6, IE5 xhr=new ActiveXObject("Microsoft.XMLHTTP"); }xhr.open("GET","****.ashx",true)//设置请求方法,请求的目标页面,以及是否异步xhr.setRequestHeader("If-Modified-Since","0");xhr.onreadystatechange=function(){ //定义XMLHttpRequest对象的onreadystatechange属性 if(xhr.readyState==4) { //判断XMLHttpRequest对象的状态 if(xhr.status==200){document.myForm.time.value=xhr.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据 } }} xhr.send(null);//发送异步请求
}
Ajax异步请求原理和过程相关推荐
- Ajax异步请求原理
一.Ajax能做什么 异步请求.局部刷新 二.同步请求 JavaScript的特点是单线程,也正是因为单线程造成了同步请求 1. 为什么JS是单线程: JS 作为游览器脚本语言,主要用途是和用户交互. ...
- php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
- ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
- ajax异步请求实例
1. 问题分析 用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...
- JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...
- 从浅到深,带你彻底搞懂AJAX异步请求
在平时开发过程中,异步请求似乎比同步请求出现的频率还要高一些.这是为什么呢?在同步请求时如果对网页的部分内容进行更新时,是不是就必须重载整个页面.这样肯定是不行的,这时就可以采用异步请求来解决此问题. ...
- 如何判断一个请求是否是Ajax异步请求
前言 今天在看项目过程中,发现了一段代码.是用来判断一个请求是否是ajax请求,出于好奇,我研究了一番. 代码预览 /*** 是否是Ajax异步请求* * @param request*/public ...
- php 返回字符串给aja,解决ajax异步请求返回的是字符串问题
1.返回结果差异 js获取后打印res.code无结果.因为返回数据格式不正确. php文件添加header头: header('Content-Type:application/json;'); 或 ...
- html弹窗赋值给查询框,bootstrap模态框动态赋值, ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框(JS)...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
最新文章
- 数据存储方式_寻找要操作数据的存储地址的过程称为寻址,几种寻址的方式分享...
- 哈哈哈,这个教人写烂代码的项目在 GitHub 上火了...
- directx 双缓冲 运动 闪烁_24期0利率 | BMW超值福袋开启“双11”购车狂欢节!!
- GAITC 2021智媒论坛丨曹立宏:AI和BI互助发展 智能媒体任重道远
- hello python jpush api_jpush python服务器端
- Android内存解析(二)— 详解内存,内部存储和外部存储
- SAP Spartacus visible-focus是如何施加到HTML element上的
- [react] 举例说明如何在React创建一个事件
- dataframe第二列 r语言_123.R简介和统计绘图
- Cmd打开Java软件
- 应该如何做好持续集成和部署?
- en55032最新标准下载_欧盟EMC标准EN55032介绍。
- Centos7 镜像资源下载
- ELK+filebeat+redis 日志分析平台
- C语言大作业:车辆信息管理系统
- leancloud上传图片js_leanCloud上传多个图片保存到一个数组中的疑惑
- Spring boot(四):整合Mybatis
- JWT 避坑指南:nbf 验签失效问题的解决
- Codeforces Round #467 (Div. 2) - D. Sleepy Game (找环)
- Linux内核中的延时函数详解
热门文章
- string::assign
- k8s(十二)、分布式存储Ceph RBD使用
- 考研操作系统【1.1 操作系统的基本概念】
- GetAsyncKeyState用法
- jstack定位CPU占用率高的线程代码
- 关于C++的placement new和placement delete
- 白光干涉仪压电陶瓷的大作用 | 科普篇
- 我们为什么要参与到 GSoC/GSoD 的活动中?
- oracle中调用过程,oracle中如何调用存储过程
- FPGM(Filter Pruning via Geometric Median)笔记