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的更多相关文章

  1. AJAX的工作原理及其优缺点

    1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML ...

  2. AJAX入门——工作原理

    同步和异步交互,了解互动 对于一个样本:一般B/S模式(同步)       AJAX技术(异步)        *  同步:       提交请求->等待server处理->处理完成返回 ...

  3. Ajax的工作原理以及优点、缺点 (汇总)

    最近空闲时间,有朋友问我关于Ajax的工作原理,在这里我结合自己的工作经验和网上大佬的经验做一个总结,如有不足,请各位业内大佬指正 在我们了解Ajax之前,我们先来了解一下Javascript的执行原 ...

  4. Ajax的工作原理以及优缺点

    Ajax的工作原理 : 相当于在客户端与服务端之间加了一个抽象层(Ajax引擎),使用户请求和服务器响应异步化,并不是所有的请求都提交给服务器,像一些数据验证和数据处理 都交给Ajax引擎来完成,只有 ...

  5. Ajax的工作原理

    Ajax的核心是JavaScript对象XmlHttpRequest.该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术.简而言之,XmlHttpRequest使您可 ...

  6. ajax及其工作原理

    1.关于ajax的名字 ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式. 2. ...

  7. Ajax学习--理解 Ajax 及其工作原理

    Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用 ...

  8. 请尽可能详尽的解释AJAX的工作原理

    第一步:创建ajax对象(XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)) 第二步:判断数据传输方式(GET/POST) 第三步:打开链接 open() ...

  9. AJAX工作原理及其优缺点

    1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它 ...

随机推荐

  1. List实体去重

    public static ArrayList<Room> removeDuplicate(List<Room> room) { Set<Room> set = n ...

  2. js获取宽度

    alert(window.screen.width );//浏览设备的分辨率(电脑.手机.平板等) alert(window.screen.availWidth );//浏览设备的实际可用宽度(电脑. ...

  3. P3719 [AHOI2017初中组]rexp

    P3719 [AHOI2017初中组]rexp一开始想的是类似计算式子的值的东西,用栈.然后发现处理最大值很麻烦,因为处理的很像子过程,所以考虑递归来做.碰到'('就递归一次,碰到'|'就取最大值再递 ...

  4. Docker备忘录

    centOS安装教程:https://docs.docker-cn.com/engine/installation/linux/docker-ce/centos/ 一.常用命令 docker buil ...

  5. 线程安全地获取插入mysql的条目的id

    在往mysql中插入条目时有时会希望能得到该插入条目的id,一种方式是再执行一个select语句条件为max(id)来获取,但这种形式在并发环境里并不是线程安全的,因为在你完成插入到再执行一个sele ...

  6. java程序的种类有三种

    Application―Java应用程序”是可以独立运行的Java程序.由Java解释器控制执行.Applet  ―Java小程序”不能独立运行(嵌入到Web页中).  由Java兼容浏览器控制执行. ...

  7. js实现文字超出部分用省略号代替实例代码

    关于超出一定字数用省略号显示的问题,这种要求在我们日常开发的时候经常见到,我们之前基本都是用CSS来完成的,今天给大家分享个Javascript实现这个功能的示例代码,有需要的可以参考借鉴. 话不多说 ...

  8. webpack总结

    1.webpack默认只能引用js文件,通过loader可以引入别的文件(css.image.font等) 2.webpack-dev-server提供了一个web server,通过配置将dist目 ...

  9. 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 ...

  10. Android 获得手机屏幕真实的宽高

    http://stackoverflow.com/questions/1016896/get-screen-dimensions-in-pixels WindowManager w = activit ...