`

Ajax基础

 
阅读更多
Ajax
允许浏览器与服务器通信而无需刷新当前页面的技术。
传统的Web模型,客户端向服务器发送一个请求,服务器返回整个页面,如此反复。
在Ajax模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面。

不用刷新整个页面即可与服务器通信的办法:
XMLHttpRequest,该对象是对javascript的一个扩展,可使网页与服务器进行通信。是实现Ajax的最佳选择。


XMLHttpRequest的方法 
abort 停止当前请求
open("method","url"):建立对服务器的调用。
send(content):向服务器发送请求
setRequestHeader("header","value"): 把指定首部设置为所提供的值。

属性
onreadyStatechange: 每次状态改变会触发这个事件处理,通常会调用一个javascript函数。

发送请求 

利用XMLHttpRequest实例与服务器进行通信包括以下3个关键部分 
onreadyStatechange事件处理函数
open(method,url,asynch)方法
open是允许程序员用一个Ajax调用向服务器发送请求。
method:请求类型,get是加在URL中发送数据,若需要想服务器发送数据,用POST。
在某些情况下,有些浏览器会把多次XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同,就会带来不好的结果。
在此时将时间戳最佳到URL最后,可以保证URl的唯一性,避免浏览器缓存结果。
url: 路径字符串
asynch: 异步,默认为异步,在读取后面的脚本之前,不需要等待服务器的相应。
执行false,当脚本处理过程经过这点时,会停下来,一直等待Ajax请求执行完毕再继续执行。
send方法

传统的XMLHTTPRequest方法如何实现Ajax
//一般在javascript中写的函数都要在body页面中调用,用此函数就不用等着body页面中调用就可以执行了
window.onload = function(){
 //1. 获取a节点,为其添加onclick相应函数
 document.getElementsByTagName("a")[0].onclick = function(){
 //3. 创建一个XMLHttpRequest对象
 var request = new XMLHttpRequest();
 //4.准备发送请求的数据:url加上时间戳,保证每次请求的URL不同,不会利用到缓存结果。
 var url = this.href+"?time="+new Date();
 var method = "GET";
 //当method为post时,需要添加头信息,它会告知服务器数据已经符合URL编码
 //request.setRequestHeader("ContentType","application/x-www-font-urlencoded");
 //5.调用XMLHttpRequest对象的open方法
 request.open(method,url);
 //6.调用XMLHttpRequest对象的send方法
 request.send(null);
 //7.为XMLHttpRequest对象添加onreadystatechange函数
 request.onreadystatechange = function(){
 //8.判断相应是否完成: XMLHttpRequest对象的readyState属性值为4的时候
  if(request.readyState == 4){
  //9.判断相应是否可用: XMLHttpRequest对象status属性值为200
   if(request.status == 200 || request.status == 304){
    alert(request.responseText);
   }
  }
 }
 //10.打印响应结果:responseText
 
 
 //2. 取消a节点的默认行为
 return false;
 };
}

------------------------------------------------------------------------------------------------------------------------
Ajax数据传输格式的三种类型(访问目标URL,读取及返回的数据格式类型)

1.HTML
解析HTML
HTML由一些普通文本组成,如果服务器通过XMLHttpRequest发送HTML,文本存储在responseText属性中。
但不比从responseText属性中读取数据,直接将HTML代码更新到目标元素的innerHTML属性中即可。

document.getElementById("details").innerHTML = request.responseText;

优点:
从服务器段返回的HTML代码不需要用javascript解析,可以直接在客户端显示。

缺点:
若通过Ajax更新一篇文档的多个部分,HTML不合适。

2.XML(目标URL是XML文件)
结果为XML格式

//1.结果为XML格式,所以需要使用responseXML来获取
var result = request.responseXML;
//2.结果不能直接使用,必须先读取节点,再把节点加入#detail中
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var email = result.getelementsByTagName("email")[0].firstChild.nodeValue;
//3.构建节点内容,目标格式如:
//<h2><a href="mailto:andy@clearleft.com"></a>Andy Budd</h2>
//<a href="http://andybudd.com">http://andybudd.com</a></h2>
var aNode = document.createElement("a");
aNode.appendChild(document.createTextNode(name));
aNode.href  = "mailto:"+email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
//页面上添加节点
var detailNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);

优点:
XML是一种通用的数据格式。

缺点:
DOM解析比较麻烦。

3.JSON(JavaScript Object Notation)一种简单的数据格式,
比xml更轻巧。JSON是Javascript原生格式,这意味着在JavaScript中处理JSON对象不需要任何的特殊API或工具包。
JSON的规则很简单,对象是一个无序的"名称/值"对集合。一个对象以{开始,}结束。每个名称后跟一个:(冒号),名称/值对之间使用逗号分隔。

JSON语句中可以包含对象,也可以包含函数
JSON用冒汗来赋值,每一条赋值语句用逗号分开,整个对象用大括号封装起来,可用大括号分级嵌套数据。
 
JSON格式如下:
var jsonObject = {
 "name":"atguigu",
 "age":12,
 "address":{"city":"BeiJing","school":"shangzhi"},
 "teaching":function(){
  alert("JavaEE,Android....")
 }
};
alert(jsonObject.name);
alert(jsonObject.address.city);
jsonObject.teaching();


JSON只是一个文本字符串,它被存储在responseText属性中
为了读取存储在responseText属性中的JSON数据,需要根据JavaScript Eval语句。
函数eval会把一个字符串当做它的参数,然后这个字符串被当做JavaScript代码来执行。
因为JSON的字符串就是由JavaScript代码构成,所以它本身是可执行的。

//如何将一个字符串转为JSON对象
//使用eval方法
var testStr= "alert('hello eval')";
eval(testStr);//将字符串作为本地的执行代码进行执行。

//将JSON字符串转为JSON对象,需要eval("("+jsonStr+")")
var jsonStr="{'name':'atguigu'}";
var testObject=eval("("+jsonStr+")");
alert(testObject.name);

//JSON对象返回值需要通过responseText来接受
var result = request.responseText;
var object = eval("(" + result + ")");
var name = object.person.name;

访问页面内容如下
{"person":{
  "name":"Jeray keith",
  "webSite":"http://adactio.com",
  "email":"jeremy@clearleft.com"
  }
}

JSON优点:
作为一个数据传送格式,JSON与XML相似,但是它更灵巧。
JSON不需要从服务器发送含有特定内容类型的首部信息。

缺点:
语法过于严禁
代码不易读
eval存在风险。

三种数据传输格式的优缺点比较:
若应用程序不需要与其他应用程序共享数据时候,使用HTML片段返回数据最简答。
如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势。
当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的"世界语言"。

--------------------------------------------------------------------------------------------------------------------------------
Jquery 实现Ajax
Jquery对Ajax操作进行了封装
在jQuery最底层的方法时$.ajax(),
第二层是load(),$.get(),$.post(),
第三层是$.getScript(),$.getJSON().

load方法使用:
载入远程HTML文件代码并插入DOM中。
load(url,[data],[callback])
url:待载入HTML网页网址(类型:String)
data:发送至服务器的key/value数据(类型:Object)
callback:载入成功时返回函数。(类型:Function)

load()方法时jQuery中最为简单和常用的Ajax方法,能载入远程的Html代码并插入DOM中。

<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $("a").click(function(){
   //使用load方法处理Ajax
   var url=this.href;
   var args = {"time":new Date()};
   //任何一个HTML节点都可以使用load方法,结果直接插入html节点中。
   //键入参数是考虑每次访问不利用缓存。
   $("#content").load(url,args);
   //取消默认行为
   return false;
  });
 });
</script>
<body>
 <a href="helloAjax.txt">HelloAjax</a>
 <div id="content"></div>
</body>

load()方法--细节
如何只加载目标HTML页面的某些元素,可以通过load()方法的URL参数来达到目的。
通过URl参数指定选择符,可以方便加载HTML文档中选出所需的内容。
load()方法的URL参数的语法结果为"url selector"(注意空格)

传递方式:load()方法的参数传递依据参数data自动指定。
如果没有参数,get方法,否则post方式。

对于必须在加载完才能继续的操作,load方法提供了回调函数,该函数有三个参数
代表请求返回的内容data;代表请求状态的textStatus对象,XMLHttpRequest对象。


$.get() $.post()
$.get()使用GET方式来进行异步请求,它的结构是$.get(url,[data],[callback],[type])
url:请求URL页面的地址
data(Object类型):发送给服务器的key/value数据会作为QueryString附加到请求的URL中。
callback:载入成功时,自动将请求的结果和状态传递给该方法。
type:服务器返回内容的格式,xml,html,script,json

$.get()方法的回调函数只有两个参数:
data代表返回的内容,可以是xml文档,JSON文件等;
textstatus代表请求状态,其值可能为succuss,error,notmodify,tiemout四种。
//url:
//args: JSON格式
//function: 回调函数:当相应结束时,回调函数被触发,返回的结果保存在data
//访问的URL是xml文件
$(function(){
$("a").click(function(){
 var url = this.href;
 var args = {"time":new Date()};
 //可以直接替换成.post函数
 $.get(url,args,function(data){
  var name=$(data).find("name").text();
  var email=$(data).find("email").text();
  var website=$(data).find("website").text();
  $("#details").empty().append("<h2><a href='mailto:'+email+"'>"+name+"</a></h2>");
 })
 return false;
});



//返回的结果以JSON格式返回,使用getJSON则直接以JSON格式获取返回的结果
$.getJSON(url,args,function(data){
 var name=data.person.name;
 var email=data.person.email;
 var website=data.person.website;
 $("#details").empty().append("<h2><a href='mailto:'+email+"'>"+name+"</a></h2>");
})

//尚若使用get方式,上面需要指明第四个参数的值为json,代码如下
$.get(url,args,function(data){
 var name=data.person.name;
 var email=data.person.email;
 var website=data.person.website;
 $("#details").empty().append("<h2><a href='mailto:'+email+"'>"+name+"</a></h2>");
},"JSON")


总结
什么是Ajax,不用刷新整个页面,但可以和服务端进行通信方式,使用Ajax的主要方式使用XMLHttpRequest对象。


3.Ajax传输数据的三个方式:
1). XML: 笨重,但xml是通用的数据交换方式。
2). HTML:不需要解析但可以直接放到文档中。若仅更新一部分区域,但传输数据有限。且HTML需要拼装完成。
3). JSON:小巧,有面向对象的特征。且有很多第三方的JAR包可以把Java对象转为JSON字符串。

4.使用Jquery完成Ajax操作
1). load方法:可以用于HTML文档的元素节点,把结果直接加为对应节点的子元素。通常而言,load加载后的数据时一个HTML
片段
var $obj=...
var url=...
var args={key:value,...};
$obj.load(url,args)

//url: 访问的链接
//args: JSON格式
//function: 回调函数:当相应结束时,回调函数被触发,相应结果保存在data
//data返回的类型可能是xml,html,json,text
//
2).$.get,$.post,$.getJSON,更加灵活,除去使用load方法的情况,大部分都是用这三个方法。
$.get(url,args,function(data){
}
)

$.post(url,args,function(data){
}
)

3).
$.get(url,args,function(data){
},"JSON")

$.getJSON(url,args,function(data){
})
--------------------------------------------------------------------------------------------------------------------------------


--典型应用,Ajax判断用户名是否已存在

<!--
1.导入Juery库
2.获取name="username"的节点: userName
3.为username添加change相应函数
4.获取username的value属性值,去除掉前后空格且不为空。准备发送Ajax请求。
5.发送Ajax请求校验username是否可用。
6.在客户端直接返回一个html的片段: <font color="red"> 该用户名已经存在</font>
7.在客户端浏览器直接把其直接添加到#message的html中。
-->

${function(){
 //查找input标签中,name等于username的标签
 $(":input[name='username']").change(function(){
 var val = $(this).val();
 val=$.trim(val);
 if(val!=""){
  var url="${pageContext.request.contextPath}/valiateUserName";
  var args={"userName":val,"time":new Date()};
  $.post(url,args,function(data){
   $("#message").html(data);
  });
 }
 });
}}

--dopost方法
protected void doPost(HttpServletRequest request,HttpServletResponse reponse){
 List<String> userNames = Arrays.asList("AAA","BBB","CCC");
 String userName = request.getParamter("userName");
 String result = null;
 if(userNames.contains(userName)){
  result = "<font color="red"> 该用户名已经存在</font>";
 }else{
  result = "<font color="red"> 该用户名可以使用</font>";
 }
 response.setContentType("text/html");
 response.setContentType("UTF-8");
 response.getWriter().print(result);
}

 

分享到:
评论

相关推荐

    csdn 图书 Ajax基础教程.chm

    《Ajax基础教程.chm》 Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的...

    ajax 基础教程源代码

    ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...

    精通Ajax 基础概念.核心技术与典型案例

    精通Ajax 基础 教程附带源代码及其案例

    AJAX基础.pdf

    AJAX基础.pdf AJAX基础.pdf AJAX基础.pdf

    ajax 基础

    ajax的基础知识 我看过还不错

    Ajax 基础教程中文版.pdf

    Ajax 基础教程中文版.pdf

    ajax 基础教程

    ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...

    Ajax基础教程(扫描版)

    原书名:Foundations of Ajax 原出版社: Apress 作者: (美)Ryan Asleson,Nathaniel T.Schutta 译者: 金灵 等 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:7115144818 上架时间:2006-2-14 ...

    Ajax基础教程(亚马逊计算机榜首图书,国内第1本Ajax图书) [第一部分 共两部分]

    本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和...

    AJax基础教程.pdf

    书名:Ajax基础教程 作者:(美)阿斯利森 舒塔

    ajax基础教程(pdf)(三)

    ajax基础教程(pdf)完整版本,希望对大家有所帮助

    ajax基础教程ajax基础教程ajax基础教程

    ajax基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程ajax基础教程ajax础教程ajax基础教程aja基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程

    Ajax基础教程中文版及源代码 part1

    堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...

    AJAX基础教程.pdf

    PDF格式电子书 适合有一点点JS基础,刚开始接触AJAX的人

    Ajax基础入门简介

    Ajax作为一门心得技术 ,这两年被广泛应用于网络应用中,并发挥着越来越重要的作用,本文就Ajax得基础知识做一个简单介绍

    Ajax基础教程

    60M的Ajax基础教程,非常适合初学者。

    第八章 AJAX基础

    第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础

    ASP.NET AJAX基础示例

    ASP.NET AJAX基础示例.................................................................................................ASP.NET AJAX基础示例

    Ajax基础教程中文版及源代码 part5

    堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...

    Ajax基础教程中文版及源代码 part3

    堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...

Global site tag (gtag.js) - Google Analytics