概念:Ajax是英文Asynchronous JavaScript And Xml的字母缩写,第一个单词表示异步。
Ajax是一种在网络应用中实现异步通讯和数据交换的技术。其实是多种技术的一个综合。包括了:JavaScript,XTHML,
CSS,xML,DOM,XSLT和XMLHttpRquest等。。
功能:1.无刷新更新页面。
2.按需求获取数据,减轻对服务器的负担。
3.实现福客户端。
4.实现按照一定的标准和广泛使用的技术。
5.实现页面和逻辑分离。
6.获取用户数据,并连续的,动态交互。
核心:其中XMLHttpRequest对象就是Ajax用来实现异步互交的核心技术。XMLHttprequest对象支持Internet Explorer 5.0,Safari 1.2,Mozilla 1.0 Firefox, Openera8+ 以及 Netscape 7。通过使用 XMLHttpRequest 对象,web 开发者可以做到在页面已加载后从服务器更新页面。不同的浏览器所创建的XMLHttpRequest对象方法也有不一样。IE 浏览器使用:ActiveXobject对象,其他浏览器使用的是 XMLHttpRequest对象。
初始化XMLHttpRequest对象的几种方案。
<script language="javascript">
var myRequest; //生命一个变量用来引用XMLHttpRequest对象
//IE 1
myRequest = new ActiveXObject("Msxm12.XMLHTTP");//在初始化XMLHttpRequest对象。
//IE 2
myRequest = new ActiveXObect("Microsoft.XMLHTTP");
//其他的浏览器
myRequest = new XMLHttpRequest();
</script>
//不过建议不要这样写,因为你无法确定客户端的浏览器,有可能对Ajax的不支持,你可以对其进行Try Catch。异常捕获。
修改后
<script language="javascript">
var myRequest; //生命一个变量用来引用XMLHttpRequest对象
try{
//IE 1
myRequest = new ActiveXObject("Msxm12.XMLHTTP");//在初始化XMLHttpRequest对象。
}catch(e){
try{
//IE 2
myRequest = new ActiveXObect("Microsoft.XMLHTTP");
//其他的浏览器
}catch(e){
try{
//其他的浏览器
myRequest = new XMLHttpRequest();
}catch(e){
alert("你的浏览器不支持Ajax!");
}
}
}
</script>
XMLHttpRequest对象的属性
属性 |
描述 |
onreadystatechange |
状态改变的事件触发器 |
redyState |
对象状态0=未初始化 1=读取中
2=以读取
3=交互中
4=完成
|
responseTest |
服务器进程返回数据的文本版本 |
responseXML |
服务器进程返回数据的兼容DOM的XML文档对象 |
status |
服务器返回的状态码如:404资源找不到200成功 |
statusText |
服务器返回状态的文本信息 |
XMLHttpRequest对象的方法;
方法 |
描述 |
abort() |
停止当前请求 |
getAllResponseHeaders() |
作为字符串返回完整的Headers |
getResponseHeader("headerLabel") |
作为字符串返回单个的Headers |
open("method","URL"[,asyncFlag[,"username"[,"password"]]]) |
设置请求目标URL方法和其他参数 |
send(content) |
发送请求 |
setRequestHeader("label","value") |
设置header并和请求一起发送 |
指定响应处理函数(回调函数)
myRequest.onreadystatechange = t2 ;
function t2(){
...............
}
发出Http请求,这里会用到open()函数。
myRequest.open("GET","b.jsp?id="+userId,true);
myRequest.send(null);发送请求。
open第一个参数:是HTTP请求,可以是GET,POST或Head
第二个参数:是目标URL,注意:只能是内部的URL
第三个参数:是指定等待服务器返回信息的时间内,是否继续执行下面的代码,如果是true则不会执行。默认是true。
调用玩open之后,直接嗲用send方法,提交数据。如需要传送文件,需要调用setRequestHeader方法,修改MIME类别。
如:myRequest.setRequestHeader("Context-Type","applicaction/msexcel").
对服务器返回的信息进行处理。
首先根据XMLHttpRequest的readyState的值进行判断,如果对象状态是完成的话。就通过responseText;
方法进行处理。
if(myRequest.readyState == 4){
var backret = myRequest.responseText;
}
for ensample
创建一个web项目。代码如下。
<script language="javascript">
var req;
function test(){
var id = document.all("id").value;
var name= document.all("name").value;
//初始化XMLHttpRequst
req = new ActiveXObject("Microsoft.XMLHTTP");
req.onreadystatechange = myDeal;//需要另一个function //服务器处理之后调用的一个方法
req.open("GET","b.jsp?id="+id+"&name="+name);
req.send(null);//没有内容,因为传递的数据在open中
}
function myDeal(){
if(req.readyState==4){
var ret = req.responseText;
document.all("myDiv").innerHTML = ret;
}
}
</script>
<center>用户注册</center>
用户名:<input type="text" name="id" onblur="test();">*<div id="myDiv" name="myDiv"></div>
密 码:<input teype="text" name="name">
<input type="button" value="注册" onclick="test()">
<%
String id = request.getParameter("id");
String name = request.getParameter("name");
if(id==null||id.trim().length()==0){
out.println("Id can't be null or empty");
}else if(id!=null&&id.equals("javass")){
out.println("ID REPEATED");
}else{
out.print("ok registry");
}
%>
学习总结:Ajax就是一个异步互交技术。用JavaScript技术负责前台准备数据,可以直接在DOM中获取提交的数据,然后组成程序合法的请求格式。当从后台返回数据后,也是由JavaScript负责解析数据,并把数据重新设置成Html的组建上进行显示。传递回来的数据可以是普通文本,也可以是XML,一般都是用文本。速度快,处理方便。
分享到:
相关推荐
AJAX实例应用初体验:自动保存草稿
PagerHelper<Ttype> 公具类 CommonPagination.ascx 只负责显示页码 个人感觉MVC 不怎么样..I don't bird it.
NULL 博文链接:https://shma1664.iteye.com/blog/1533496
最后一部分通过几个大型的实例,让读者深入领会Ajax技术在实际网络项目中的优势,也让读者体验这种优势所带来的优越性能。 本书适用于初、中级网络开发者,对于高级开发人员也很有启发。没有接触过Ajax的入门者...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
如果你对AJAX不是很了解,可以先看看这篇教程的前篇《AJAX初体验之上手篇》。 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客。对于一些有一定能力的朋友,可能更喜欢自己去...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
ASP.NET 在2007年初推出了其第一个正式版本,并将Atlas更名为ASP.NET AJAX,对应服务器端和客户端分别对应有ASP.NET服务器端编程模型和ASP.NET客户端编程模型,前者包含ASP.NET 2.0 AJAX Extensions和,后者包含...
AJAX是这两年蛮热的东西,我也凑凑热闹,前些天去找了些教程学学,下面就按整个处理过程把自己学的东西写写,不过,因为是初学,所以 有错误就请见谅啦,也欢迎指正,vipxjw#163.com。 PS.写完了之后看了下,结果...
本书最大的特色在于每一章中涉及的例子都经过精挑细选,具有很强的针对性,力求让读者轻松掌握PHP项目开发的技巧和Ajax改善用户体验的各种技术,学习尽可能多的知识。 本书适用于初、中级有一定基础的PHP程序员,...
promise初体验,自定义promise函数,promise基本流程,api的使用,以及使用promise会面临的问题,async函数,await表达式,async和await结合发送ajax请求
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
目录…………第一章 ajax概述与ajax初体验 第二章 XMLHttpRequest对象详解 第三章 jquery库详解 第四章 基于jquery的应用:电子相册系统 第五章 Ext JS 核心技术详解 第六章 Ext JS界面组件详解 第七章 ...
因此在设计之初,就选择了DIV+AJAX模式,这样在提高响应速度的同时,更提高了用户体验。目前本CMS集成企业简介,新闻资讯,产品展示,资源下载,人才招聘,解决方案,企业相册,留言反馈。系统各模块相互独立,可扩展性非常...
本书最大的特色在于每一章中涉及的例子都经过精挑细选,具有很强的针对性,力求让读者轻松掌握PHP项目开发的技巧和Ajax改善用户体验的各种技术,学习尽可能多的知识。 本书适用于初、中级有一定基础的PHP程序员,...
第2章 Ajax初体验···· 32 2.1 Ajax带来的优势········ 32 2.2 传统的JSP聊天室···· 34 2.2.1 实现业务逻辑组件··········· 35 2.2.2 实现控制器···· 38 2.2.3 实现视图······...