ajax的工作原理2
Ajax是异步javascript和xml,可以在不重新加载整个网页的情况下,与服务器异步数据交换,对网页中某个部分进行局部刷新。
Ajax是如何实现局部刷新的:
在脚本设置window对象的location属性和调用表单对象的submit方法时,都会初始化HTTP请求,这时浏览器就会刷新页面。Ajax技术使用XMLHttpRequest对象后台与服务器通讯,这样就可以达到局部刷新的目的。
Ajax是如何实现异步调用的:
异步调用主要通过回掉函数来实现。一旦服务器响应,就执行回掉函数callback()。
浏览器在XMLHttpRequest类上定义了HTTP API,使用这个API发送异步请求的过程,主要的方法是open()和send()。
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 |
| send(string) | 将请求发送到服务器。 |
一个完整的HTTP响应由状态码、响应头集合和响应主体组成。在异步请求中,通过监听XMLHttpRequest对象上的readystatechange事件来得到响应就绪时的通知。
readyState指定了HTTP请求的状态。当readyState为4时或服务器的响应完成时,浏览器会触发readystatechange事件。在Ajax执行过程中,服务器会通知客户端当前的通信状态,就是通过更新readyState来完成。


1 xmlhttp.onreadystatechange=function()
2 {
3 if (xmlhttp.readyState==4 && xmlhttp.status==200)
4 {
5 document.write(xmlhttp.responseText);
6 var type = request.getResponseHeader("content-Type");
7 if(type=="application/json") {
8 callback(xmlhttp.responseText); //回掉函数解析HTTP响应
9 }
10 }
11 }
12 xmlhttp.open("GET",url,true);
13 xmlhttp.send()

ajax的工作原理2的更多相关文章
- AJAX的工作原理及其优缺点
1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...
- AJAX入门——工作原理
同步和异步交互,了解互动 对于一个样本:一般B/S模式(同步) AJAX技术(异步) * 同步: 提交请求->等待server处理->处理完成返回 ...
- Ajax的工作原理以及优点、缺点 (汇总)
最近空闲时间,有朋友问我关于Ajax的工作原理,在这里我结合自己的工作经验和网上大佬的经验做一个总结,如有不足,请各位业内大佬指正 在我们了解Ajax之前,我们先来了解一下Javascript的执行原 ...
- Ajax的工作原理以及优缺点
Ajax的工作原理 : 相当于在客户端与服务端之间加了一个抽象层(Ajax引擎),使用户请求和服务器响应异步化,并不是所有的请求都提交给服务器,像一些数据验证和数据处理 都交给Ajax引擎来完成,只有 ...
- Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可 ...
- ajax及其工作原理
1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...
- Ajax学习--理解 Ajax 及其工作原理
Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用 ...
- 请尽可能详尽的解释AJAX的工作原理
第一步:创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)) 第二步:判断数据传输方式(GET/POST) 第三步:打开链接 open() ...
- AJAX工作原理及其优缺点
1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它 ...
随机推荐
- List实体去重
public static ArrayList<Room> removeDuplicate(List<Room> room) { Set<Room> set = n ...
- js获取宽度
alert(window.screen.width );//浏览设备的分辨率(电脑.手机.平板等) alert(window.screen.availWidth );//浏览设备的实际可用宽度(电脑. ...
- P3719 [AHOI2017初中组]rexp
P3719 [AHOI2017初中组]rexp一开始想的是类似计算式子的值的东西,用栈.然后发现处理最大值很麻烦,因为处理的很像子过程,所以考虑递归来做.碰到'('就递归一次,碰到'|'就取最大值再递 ...
- Docker备忘录
centOS安装教程:https://docs.docker-cn.com/engine/installation/linux/docker-ce/centos/ 一.常用命令 docker buil ...
- 线程安全地获取插入mysql的条目的id
在往mysql中插入条目时有时会希望能得到该插入条目的id,一种方式是再执行一个select语句条件为max(id)来获取,但这种形式在并发环境里并不是线程安全的,因为在你完成插入到再执行一个sele ...
- java程序的种类有三种
Application―Java应用程序”是可以独立运行的Java程序.由Java解释器控制执行.Applet ―Java小程序”不能独立运行(嵌入到Web页中). 由Java兼容浏览器控制执行. ...
- js实现文字超出部分用省略号代替实例代码
关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用CSS来完成的,今天给大家分享个Javascript实现这个功能的示例代码,有需要的可以参考借鉴. 话不多说 ...
- webpack总结
1.webpack默认只能引用js文件,通过loader可以引入别的文件(css.image.font等) 2.webpack-dev-server提供了一个web server,通过配置将dist目 ...
- Spring 3.1 M1: Unified Property Management(转)
In the first two posts of this series, I described the bean definition profiles feature, and how it ...
- Android 获得手机屏幕真实的宽高
http://stackoverflow.com/questions/1016896/get-screen-dimensions-in-pixels WindowManager w = activit ...