AJAX异步请求原理和过程
AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方法。
AJAX 基于 JavaScript 和 HTTP 请求(HTTP requests)的,因为AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新,通过 AJAX,你可以创建更好、更快以及更友好的 WEB 应用程序
Ajax 可以调用服务器任何资源,可以调用动态页面、静态页面,也可以调用json对象,但是由于浏览器无法解析二进制文件,故调用图片等时就会报错。
调用json对象时,必须使用eval("(" + 返回的对象 + ")");,否则无法解析对象的资源。
AJAX异步请求原理和过程:
1、AJAX创建异步对象XMLHttpRequest :
AJAX 的要点是 XMLHttpRequest 对象。不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。IE浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。如需针对不同的浏览器来创建此对象,我们要使用一条 "try and catch" 语句。如下示例:
<script type="text/javascript">
function GetXmlHttpObject()
{
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari等浏览器创建XMLHttpRequest对象的方法
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer浏览器创建XMLHttpRequest对象的方法
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//IE6.0以上的浏览器创建XMLHttpRequest对象的方法
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE6.0以下的浏览器创建XMLHttpRequest对象的方法
}
catch (e){
alert("您的浏览器不支持AJAX!");
return false;
}
}
} return xmlHttp;
}
</script>
首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。
然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败,则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"),假如也不成功,则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
假如这三种方法都不起作用,那么这个用户所使用的浏览器已经太过时了,他或她会看到一个声明此浏览器不支持 AJAX 的提示。
2、操作XMLHttpRequest 对象:
(1)设置请求参数(请求方式,请求页面的相对路径,是否异步)
(2)设置回调函数,一个处理服务器响应的函数,使用 onreadystatechange ,类似函数指针,如
xmlHttp.onreadystatechange=function()
{
// 我们需要在这里写一些代码
}
(3)获取异步对象的readyState 属性:该属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。
readyState 属性可能的值:
0 请求未初始化(在调用 open() 之前)
1 请求已提出(调用 send() 之前)
2 请求已发送(这里通常可以从响应得到内容头部)
3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4 请求已完成(可以访问服务器响应并使用它)
在调用时,我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// 从服务器的response获得数据
}
}
(4)判断响应报文的状态,若为200说明服务器正常运行并返回响应数据,
(5)读取响应数据,可以通过 responseText 属性来取回由服务器返回的数据。
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
document.myForm.time.value=xmlHttp.responseText;
}
}
}
示例如下:
<script type="text/javascript"> function ajaxFunction()
{
var xmlHttp=GetXmlHttpObject();//定义XMLHttpRequest对象
xmlHttp.open("GET","****.ashx",true)//设置请求方法,请求的目标页面,以及是否异步
xmlHttp.setRequestHeader("If-Modified-Since","0"); xmlHttp.onreadystatechange=function(){ //定义XMLHttpRequest对象的onreadystatechange属性 if(xmlHttp.readyState==4) { //判断XMLHttpRequest对象的状态
if(xmlHttp.status==200){
document.myForm.time.value=xmlHttp.responseText;//通过XMLHttpRequest对象的responseText属性获取回传的数据
}
}
}
xmlHttp.send(null);//发送异步请求
} </script>
<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>
AJAX异步请求原理和过程的更多相关文章
- Ajax异步请求原理的分析
我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事情都做不了.这就 ...
- 详解Ajax请求(二)——异步请求原理的分析
在上一文章里,我们分析了同步请求的原理.当浏览器向服务器发送同步请求时,服务处理同步请求的过程中,浏览器会处于等待的状态,服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据,浏览器重新加载 ...
- jquery Ajax异步请求之session
写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...
- ajax异步请求实例
1. 问题分析 用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...
- 原生ajax异步请求基础知识
一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...
- AJAX异步请求,局部刷新
AJAX异步请求,局部刷新 window.onload=function(){ //dom事件,页面加载完成执行如下函数 doGetObjects(); } function doGetObjects ...
- ajax异步请求模式
什么是异步请求 我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收.处理服务器响应的数据的.这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事 ...
- 黑马eesy_15 Vue:03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
随机推荐
- 使用Areas(区域)分离ASP.NET MVC 项目
在使用Areas区域时,如果使用默认路由表,将造成路由表冲突,这种情况需要修改一下区域内<区域名称>AreaRegistration.cs和/App_Start/RouteConfig.a ...
- Java_InvokeAll_又返回值_多个线程同时执行,取消超时线程
package com.demo.test4; import java.util.ArrayList; import java.util.List; import java.util.concurre ...
- python_基本语法
初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...
- Linux命令行技巧
Linux命令行技巧 命令 描述 • apropos whatis 显示和word相关的命令. 参见线程安全 • man -t man | ps2pdf - > man.pdf 生成一个PDF格 ...
- css笔记17:盒子模型加强版的案例
1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...
- lk启动流程详细分析
转载请注明来源:cuixiaolei的技术博客 这篇文章是lk启动流程分析(以高通为例),将会详细介绍下面的内容: 1).正常开机引导流程 2).recovery引导流程 3).fastboot引导流 ...
- 使用copy再次实现Circle类,保证不能有内存泄漏问题
#import <Foundation/Foundation.h> //xieyi @protocol showOn @required -(void)printOn; @end // l ...
- Java之MS SQL数据库连接
一 1.首先,到微软官方下载jdbc驱动包 Microsoft JDBC Driver 4.0 for SQL Server 2.运行sqljdbc_4.0.2206.100_chs.exe,把文件 ...
- [转]Asp.Net MVC 扩展联想控件
本文转自:http://www.cnblogs.com/bright-lin/archive/2013/02/06/MVC_SuggestBox.html 在web中,为改善用户体验,我们常会将一些文 ...
- mysql 修改 character_set_database 编码格式
操作系统:win10 x64 Server version : 5.5.46 MySQL Community Server (GPL) mysql 修改 character_set_database ...