Ajax实现原理详解

Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程。使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作。

   这就是异步调用的很好体现。首先得了解什么是异步和同步的概念。

   举个例子:比如你去图书馆借某种书,可惜图书馆此书被借完。这时可以采用两种做法。

第一种做法:在图书馆一直等待,直到有人还书,然后再去吃饭睡觉。

第二种做法:直接跟图书馆管理员约定,若是有人还书,直接通知你。你则该忙什么忙什么。到时候会通知你。

而第一种做法就是同步的表现,必须等待别人还书(等待服务器返回信息)才进行其他事情,至死方休。

而第二种做法就是异步的表现,不耽误时间,合理利用时间高效率做事。

遇到这种情况,你会采用那种办法呢?

选择第一种,哈哈,说明你太执着啦;选择第二种,说明你灵活变通,合理安排自己的人生。你自己看着办吧。

  那Ajax是如何从浏览器发送Http请求到服务器呢?

  这就得使用一个重要的对象XMLHttpRequest。

  那首先了解一下XMLHttpRequest对象的属性和方法。

  主要的属性:

readyState属性有五个状态值。

0:是uninitialized,未初始化。已经创建了XMLHttpRequest对象但是未初始化。
1:是loading,send for request but not called .已经开始准备好要发送了。
2:是loaded, send called,headers and status are available。已经发送,但是还没有收到响应。
3:是interactive,downloading response,but responseText only partial set.正在接受响应,但是还不完整。
4:是completed,finish downloading.接受响应完毕。
responseText:服务器返回的响应文本。只有当readyState>=3的时候才有值,根据readyState的状态值,可以知道,当readyState=3,返回的响应文本不完整,只有readyState=4,完全返回,才能接受全部的响应文本。

responseXML:response  as Dom Document object。响应信息是xml,可以解析为Dom对象。

status:服务器的Http状态码,若是200,则表示OK,404,表示为未找到。

statusText:服务器http状态码的文本。比如OK,Not Found。

  主要的方法:

open(method,url,boolean):打开XMLHttpRequest对象。其中method方法有get,post,delete,put。若是查数据,从服务器中得到一定的数据,则使用get。若是直接提交到服务器中,更新一定的数据,则使用post;url是请求资源的地址。第三个参数表示是否使用异步。默认情况是true,因为Ajax的特点就是异步传送。若使用同步则false。异步和同步上述已经举例。

send(body):发送请求Ajax引擎,让Ajax引擎操作。其中发送的内容可以是需要的参数,若是没有参数,直接send(null)

  那如何使用Ajax技术?

首先,有客户端事件触发Ajax事件。

然后,创建xmlHttpRequest对象,根据浏览器不同,创建的xmlHttpRequest对象不同。用open调用,用send发送请求给Ajax引擎。

最后,执行完毕后,把结果返回给客户端。

  执行的流程如下:\

 

测试代码如下:

     创建xmlHttpRequest对象:

     function createXMLHttpRequest() {

//表示当前浏览器不是ie,如ns,firefox

if(window.XMLHttpRequest) {//关于这个解释请看本篇文章最底下

xmlHttp = new XMLHttpRequest();

} else if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

    }

     客户端事件触发:     

         function validate(field){

           if(trim(field.value).length!=0)

          {

 //创建XMLHttpRequest

 createXMLHttpRequest() ;

 var url="user_validate.jsp?userId=" + trim(field.value)+"&timestampt="+new Date().getTime();

 // alert(url);

 xmlHttp.open("GET", url, true);

 //方法地址。处理完成后自动调用,回调。

 xmlHttp.onreadystatechange=callback ;

 xmlHttp.send(null);//将参数发送到Ajax引擎

 } else{ document.getElementById("userIdSpan").innerHTML = "";    }       

  }

结果返回操作:

function callback(){

 {       

 alert(xmlHttp.readyState);

 

 if(xmlHttp.readyState==4){ //Ajax引擎初始化

 if(xmlHttp.status==200){ //http协议成功

 //alert(xmlHttp.responseText);

 document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>";

 }else

            {

             alert("请求失败,错误码="+xmlHttp.status);

            }                

 }

 }

注意:

      onreadyStateChange事件,当readyState状态值发生改变就会触发此事件。

      其中,xmlHttpRequest提交http请求的过程中,readyState历经五个状态值(0,1,2,3,4),所以callback函数中的alert(xmlHttp.readyState)则会不断输出1,2,3,4。其中0状态不会输出,因为0状态的时候并不执行此事件。

       ps:当时在eslipse默认web 浏览器中输出的readyState状态顺序一直是:1,3,4,2。当时很纠结,因为状态值含义的分析,结果应该是1,2,3,4。后来折腾半天,才发现是浏览器的问题。不同的浏览器,执行的结果是不同的。使用IE浏览器测试,结果是1,2,3,4。哈哈,真的只有想不到,没有搜不到的。

 

附加内容:

if (window.XMLHttpRequest){。。。。。。}是什么意思?

    在JS里,window是最顶级对象(除了Object,Function...那些之外),它代表了一个窗体。而window.XMLHttpRequest代表的是window的一个属性。
这个是用来区分浏览器的,因为在firefox,opera,safiar,IE7.0,IE8.0(我所知道的window对象有这个属性的浏览器)这些浏览器中,window是有
XMLHttpRequest这个属性的,而IE6.0,5.5都是没有的,IE6.0或5.5是没有这个属性的,使用window.ActiveXObject替代。当然前者和后者的
XMLHttpRequest对象生成方式也是不一样的。

转载于:https://www.cnblogs.com/tzz-ing/p/5700377.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/457546.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringJDBC解析3-回调函数(update为例)

PreparedStatementCallback作为一个接口&#xff0c;其中只有一个函数doInPrepatedStatement&#xff0c;这个函数是用于调用通用方法execute的时候无法处理的一些个性化处理方法&#xff0c;在update中的函数实现&#xff1a; protected int update(final PreparedStatementCr…

System.InvalidOperationException : 不应有 Response xmlns=''。

xml如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <Response version"2"><datacash_reference>4700203048783633</datacash_reference><information>Failed to identify the card scheme of the supp…

Navicat Premium连接SQL Server

Navicat Premium连接SQL Server 步骤&#xff1a; 激活SQL Server 服务配置SQL Server网络配置连接SQL Server 激活SQLServer服务 直接搜索 计算机管理 点 服务和应用程序&#xff0c; 点 SQL Server配置管理器&#xff0c; 双击第一个SQL Server服务 不出意外的话&#xf…

processon完全装逼指南

一、引言 作为一名IT从业者&#xff0c;不仅要有扎实的知识储备&#xff0c;出色的业务能力&#xff0c;还需要具备一定的软实力。软实力体现在具体事务的处理能力&#xff0c;包括沟通&#xff0c;协作&#xff0c;团队领导&#xff0c;问题的解决方案等&#xff0c;这些能力在…

解决svn log显示no author,no date的方法之一

只要把svnserve.conf中的anon-access read 的read 改为none&#xff0c;也不需要重启svnserve就行 sh-4.1# grep "none" /var/www/html/svn/pro/conf/svnserve.conf ### and "none". The sample settings below are the defaults. anon-access none转载…

解决larave-dompdf中文字体显示问题

0、使用MPDF dompdf个人感觉没有那么好用&#xff0c;最终的生产环境使用的是MPDF&#xff0c;github上有文档说明。如果你坚持使用&#xff0c;下面是解决办法。可以明确的说&#xff0c;中文乱码是可以解决的。 1、安装laravel-dompdf依赖。 Packagist&#xff1a;https://pa…

mfc程序转化为qt_小峰的QT学习笔记

我的专业是输电线路&#xff0c;上个学期&#xff0c;我们开了一门架空线路设计基础的课&#xff0c;当时有一个大作业是计算线路的比载&#xff0c;临界档距&#xff0c;弧垂最低点和安装曲线。恰逢一门结课考试结束&#xff0c;大作业ddl快到&#xff0c;我和另外两个同专业的…

【IDEA 2016】intellij idea tomcat jsp 热部署

刚开始用IDEA&#xff0c;落伍的我&#xff0c;只是觉得IDEA好看。可以换界面。想法如此的low。 真是不太会用啊&#xff0c;弄好了tomcat。程序启动竟然改动一下就要重启&#xff0c;JSP页面也一样。 IDEA可以配置热部署&#xff0c;打开tomcat配置页面&#xff0c;将红框处&a…

设计模式11---组合模式(Composite Pattern)

一、组合模式定义 将对象组合成树形结构以表示“部分-整体”的层次结构&#xff0c;使得用户对单个对象和组合对象的使用具有一致性。Compose objects into tree structures to represent part-whole hierarchies. Composite lets clients treat individual objects and compos…

python实现Redis订阅发布

Redis 发布订阅 Redis 发布订阅可以用在像消息通知&#xff0c;群聊&#xff0c;定向推送&#xff0c;参数刷新加载等业务场景 发布订阅模型有三个角色&#xff1a; 发布者&#xff08;Publisher&#xff09;订阅者(Subscriber)频道(channel) 每个订阅者可以订阅多个频道&am…

iOS开发UI篇—xib的简单使用

一、简单介绍 xib和storyboard的比较&#xff0c;一个轻量级一个重量级。 共同点&#xff1a; 都用来描述软件界面 都用Interface Builder工具来编辑 不同点: Xib是轻量级的&#xff0c;用来描述局部的UI界面 Storyboard是重量级的&#xff0c;用来描述整个软件的多个界面&…

【云栖计算之旅】线下沙龙第2期精彩预告:Docker在云平台上的最佳实践

Docker是一个开源的应用容器引擎&#xff0c;提供了一种在安全、可重复的环境中自动部署软件的方式&#xff0c;允许开发者将他们的应用和依赖包打包到一个可移植的容器中&#xff0c;然后发布到任何流行的Linux机器上&#xff0c;也可以实现虚拟化。容器完全使用沙箱机制&…

mysql int类型的长度值

整数类型的存储和范围(来自mysql手册) 类型字节最小值最大值(带符号的/无符号的)(带符号的/无符号的)TINYINT1-1281270255SMALLINT2-3276832767065535MEDIUMINT3-83886088388607016777215INT4-2147483648214748364704294967295BIGINT8-92233720368547758089223372036854775807…

龙王我当定了(一个在QQ刷龙王的脚本)

自从学了python&#xff0c;龙王再也没丢过&#xff0c;就是经常被打, QQ 和 TIM 都可以&#xff0c;发送时要把聊天窗口打开。 # 如果import报错&#xff0c;那可以pip下载这几个模块试一试 import win32gui import win32con import win32clipboard as w import random from…

navicat for mysql 数据库备份与还原

一, 首先设置, 备份保存路径 工具 -> 选项 点开 其他 -> 日志文件保存路径 二. 开始备份 备份分两种, 一种是以sql保存, 一种是保存为备份 SQL保存 右键点击你要备份的数据库, -> 转储SQL文件 选择位置和文件名 开始转储 导入 建议 删除所有表 或 重新建数据库 同导出…

DES的原理及python实现

DES加密算法原理及实现 DES是一种对称加密算法【即发送者与接收者持有相同的密钥】&#xff0c;它的基本原理是将要加密的数据划分为n个64位的块&#xff0c;然后使用一个56位的密钥逐个加密每一个64位的块&#xff0c;得到n个64位的密文块&#xff0c;最后将密文块拼接起来得…

华为手机充满有提醒吗_2020手机充电速度排名:最快21分钟充满,华为第15名

5G手机扎堆出现&#xff0c;中国5G基站数量也是不断增多&#xff0c;中国移动曾经表态&#xff0c;2020年底将会在全国地级市覆盖5G网络&#xff0c;全民5G时代终于到来&#xff01;从目前国内手机出货量数据来看&#xff0c;5G手机占比已经达到了六成以上&#xff0c;国产5G手…

关于移动手机端富文本编辑器qeditor图片上传改造

日前项目需要在移动端增加富文本编辑&#xff0c;上网找了下&#xff0c;大多数都是针对pc版的&#xff0c;不太兼容手机&#xff0c;当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能&#xff0c;所以要找的编辑器功能必须是精简的。 找了好久&#xff0c;发现qedit…

Java IO 系统

Java IO系统 File类 用来处理文件目录&#xff0c;既可以代表一个特定文件的名称&#xff0c;也可以代表一组文件的名称&#xff0c;如果代表的是一个文件组&#xff0c;可以调用File.list()方法返回一个字符数组。 list()不传递任何参数时返回该目录下所有文件或文件名的字…

javascript/jquery高度宽度详情解说分析

为什么80%的码农都做不了架构师&#xff1f;>>> 一、window对象表示浏览器中打开的窗口 二、window对象可以省略 一、document对象是window对象的一部分 二、浏览器的HTML文档成为Document对象 window.location和document.location window对象的location属性引用的…