您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

ajax如何正确的使用?初识ajax时候的使用详情

2024/4/6 21:57:11发布15次查看
本篇文章主要的介绍了关于ajax的定义,对于一些刚认识ajax的人来说,这个还是不懂的,所以这篇文章教大家如何正确的理解ajax以及正确的学习ajax。现在就一起来看这篇文章吧
这几天正在学asp.net ajax,学的有点迷糊,所以决定先学ajax,再向asp.net ajax过渡,本文将带大家初识ajax,从宏观上看ajax,再从细节部分学习,文章脉络如下。
ajax定义
ajax组成
xmlhttprequest
常见ajax使用
ajax客户端生命周期
实现原理
一个简单的实例
ajax定义
ajax是asynchronous javascript and xml(异步javascript和xml)的缩写,它不是一种新的编程语言,而是一种使用现有标准的新方法。看全称好像只有javascript和xml,其实ajax并不是只包含javascript和xml,ajax是由javascript、xml、css、dom和xmlhttprequest等组成的。
ajax组成
除了json和xmlhttprequest,其它的以前都学习过,所以简略介绍一下。
1、html/xhtml:用于描述ajax页面的初始样式,即首次加载显示的页面。
2、dom:document object model(文件对象模型),用来表示xml数据结构。
3、css:cascading style sheet(层叠样式表)达式,用来表示html文件中元素出现的样式。
4、xml和json:xml是标准的数据样式,无论是服务器端还是客户端都可以很好地对其进行解释,
json:javascript object notation,因为json的格式和javascript中定义对象的语法一致, 对于同样的数据,json要比xml更简短,减少了网络流量。
5、服务器端处理浏览器请求:开发者可以选择他所熟悉的方式进行服务器端设计实现。
6、xmlhttprequest对象:它允许开发者在javascript中以异步的方式向服务器发出http请求并得到响应。
7、javascript:通过javascript可以将上述元素联系在一起,例如通过javascript查看修改dom、css等。
xmlhttprequest对象
xmlhttprequest对象是ajax和web 2.0应用程序的技术基础,ajax利用xmlhttprequest来实现发送和接收http请求与响应信息。一个经由xmlhttprequest对象发送的http请求不需要页面中拥有或回寄一个<form>元素。ajax中的a代表了异步,这意味着xmlhttprequest对象的send()方法可以立即返回,从而让web页面上的其它html/javascript继续其浏览器端处理而由服务器处理http请求并发送响应。缺省情况下请求是异步进行的,你也可以选择发送同步请求,这将会暂停其它web页面的处理,直到该页面接收到服务器的响应为止,在使用xmlhttprequest对象发送请求和处理响应之前,必须先用javascript创建一个xmlhttprequest对象。(想看更多就到ajax开发手册栏目中学习)
xmlhttprequest属性
属 性
描 述
onreadystatechange
每个状态改变时都会触发这个事件处理器,通常会调用一个javascript函数
readystate
请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成
responsetext
服务器的响应,表示为一个串
responsexml
服务器的响应,表示为xml。这个对象可以解析为一个dom对象
status
服务器的http状态码(200对应ok,404对应not found(未找到),等等)
statustext
http状态码的相应文本(ok或not found(未找到)等等)
xmlhttprequest方法
方 法
描 述
abort()
停止当前请求
getallresponseheaders()
把http请求的所有响应首部作为键/值对返回
getresponseheader(header)
返回指定首部的串值
open(method, url)
建立对服务器的调用。method参数可以是get、post或put。url参数可以是相对url或绝对url。这个方法还包括3个可选的参数
send(content)
向服务器发送请求
setrequestheader(header, value)
把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()
ajax的使用
为什么使用ajax?因为它可以实现异步通信,可以对页面部分刷新,同时减少了数据传输量,最重要的一点是给了用户更好的体验。
ajax在当前web中非常常见,比如google的地图,每次拖动都会重新加载该区域,但页面并没有刷新;百度的搜索框,输入后出现匹配的内容;微博上面的内容更新,也未重新加载页面……
ajax客户端生命周期
把这个周期分成了六个容易区分的过程,如下:
(1)用户对某个网址提出浏览请求。
(2)服务器将html页面内容发送给浏览器。
(3)浏览器根据所收到的html内容,在内存中创建dom。
(4)用户触发异步请求给服务器。此举不会影响既有的dom,即用户操作不会被打断。
(5)浏览器将xml格式数据发送给原页面中的javascript函数进行处理。
(6)浏览器解析结果,接着更新内存中的dom,网页部分内容被更新,非常平顺地显示页面。
实现原理
ajax的加载和传统web应用相同:首先,输入url地址或点击链接引发了浏览器一次http请求;然后服务器处理请求,生成合适的html、css以及javascript,并发送至客户端;客户端浏览器将这一段html显示出来;此后的用户操作的响应开始不同:用户的这些操作将不会引发浏览器的另一次http请求,而是将引发客户端的某段javascript代码的执行。
再怎么形象的描述也不如一张图:
一个简单的实例:不重新加载页面获取book.xml中的书名。
html代码:
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>book</title><script type="text/javascript"> function loadxmldoc() { var xmlhttp; var txt, x, i; if (window.xmlhttprequest) { // 当今主流浏览器 xmlhttp = new xmlhttprequest(); } else { // ie5、ie6 xmlhttp = new activexobject("microsoft.xmlhttp"); } //状态 xmlhttp.onreadystatechange = function () { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { xmldoc = xmlhttp.responsexml; txt = ""; //获取全部书名 x = xmldoc.getelementsbytagname("书名"); for (i = 0; i < x.length; i++) { txt = txt + x[i].childnodes[0].nodevalue + "<br />"; } //把书名写到myp中 document.getelementbyid("myp").innerhtml = txt; } } //使用get,异步项为true xmlhttp.open("get", "book.xml", true); xmlhttp.send(); }</script></head><body><h2>我的藏书:</h2><br/><p id="myp"></p><br/><br/><button type="button" onclick="loadxmldoc()">获取我的藏书</button> </body></html>
book.xml
<书籍> <书 类别="网络"> <书名 lang="en">web开发</书名> <作者>m</作者> <年份>2008</年份> <价格>35</价格> </书> <书 类别="计算机"> <书名 lang="en">存储体</书名> <作者>c</作者> <年份>2012</年份> <价格>30</价格> </书></书籍>
运行结果:未刷新显示结果如下
本篇文章到这就结束了(想看更多就到ajax使用手册栏目中学习),有问题的可以在下方留言提问。
以上就是ajax如何正确的使用?初识ajax时候的使用详情的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product