您当前的位置:移动互联培训 > Java培训 > JAVA开发 >
华清Java培训专家:Ajax快速入门教程
来源:华清远见JAVA学院 2017-05-04今天华清Java培训专家要为大家分享一下如何快速入门Ajax,告诉大家什么是Ajax?为什么要使用Ajax?以及Ajax的使用方法,希望对大家学习Ajax有所帮助。
Ajax快速入门教程
一、什么是AJAX?
AJAX的意思就是异步的JavaScript和XML。简而言之,它是使用XMLHttpRequest对象与服务器端通信的脚本语言。它可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。AJAX为吸引人的就是它的“异步”特性,这意味着AJAX可以无需刷新页面而与服务器端进行通信。允许你根据用户事件来更新部分页面内容。
二、为什么要使用Ajax?Ajax有哪些有点?
1、大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以大程度的减少冗余请求,和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序。
三、Ajax的使用方法
1、创建XMLHttpRequest对象
参看上面的示例!
2、服务器端向客户端响应(注册监听)
XMLHttpRequest对象的onreadystatechange属性:
1>该事件处理函数由服务器触发,而不是用户。
2>在 Ajax 执行过程中,服务器会通知客户端当前的通信状态。这依靠更新XMLHttpRequest 对象的 readyState来实现。改变readyState 属性是服务器对客户端连接操作的一种方式。
3>每次 readyState 属性的改变都会触发 readystatechange事件。
XMLHttpRequest对象的readyState 属性:
1>readyState 属性表示Ajax请求的当前状态。
2>它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
3>每次 readyState 值的改变,都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数,那么每次 readyState 值的改变都会引发该函数的执行。
4>readyState 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4。
XMLHttpRequest对象的status属性:
1>服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中重要的首部信息,并且属于超文本传输协议中的一部分。
2>常用状态码及其含义:
404 没找到页面(notfound)
403 禁止访问(forbidden)
500 内部服务器出错(internalservice error)
200 一切正常(ok)
304 没有被修改(notmodified)(服务器返回304状态,表示源文件没有被修改 )
3>在 XMLHttpRequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较,可以确保服务器是否已发送了一个成功的响应。
3、建立客户端与服务器端的通信连接
XMLHttpRequest对象的open ( method, url, asynch ) 方法XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求
method:请求类型,类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用POST。
url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
asynch:表示请求是否要异步传输,默认值为true(异步)。指定true,在读取后面的脚本之前,不需要等待服务器的相应。指定false,当脚本处理过程经过这点时,会停下来,一直等到Ajax请求执行完毕再继续执行。
如果请求方式是”POST”方式的话,需要再open ( ) 方法后,调用setRequestHeader(header,value)方法,当浏览器向服务器请求页面时,它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。
Ajax 请求中,发送首部信息的工作可以由 setRequestHeader完成。
参数header: 首部的名字;
参数value:首部的值。
如果用 POST 请求向服务器发送数据,需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了,该方法必须在open()之后才能调用。
4、客户端向服务器端发送请求
XMLHttpRequest对象的send (data ) 方法
1>如果请求方式是”GET”方式的话,send ( ) 方法发送请求数据,服务器端接受不到参数。
2> 如果请求方式是”POST”方式的话,send ( ) 方法发送请求数据,服务器端可以接受参数。
每当谈到JavaEE开发,很多初学者就认为JavaEE就是JAVA语言,这么想其实也没错,但多了俩个E,其实差距还是...
每当谈到JAVAEE开发,很多初学者就认为JAVAEE就是JAVA语言,这么想其实也没错,但多了俩个E,其实差距还是...
JVM在Java应用程序优化中是不可缺少的一项,如何合理配置Java参数,如何验证配置参数的有效性,从GC日志中...
Copyright ©2004-2018 华清远见教育科技集团 版权所有
京ICP备16055225号,京公海网安备11010802025203号