AJAX初步

1.什么是AJAX

客户端与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术,即,AJAX是一个【局部刷新】的【异步】通讯技术;

AJAX不是全新的语言,是2005年Google公司推出的一种全新【编程模式】,不是新的编程语言。

2.AJAX开发步骤

步一:创建AJAX异步对象,例如:createAJAX()

步二:准备发送异步请求,例如:ajax.open(method,url)

步三:如果是POST请求的话,一定要设置AJAX请求头,例如:ajax.setRequestHeader(),如果是GET请求的话,无需设置设置AJAX请求头

步四:真正发送请求体中的数据到服务器,例如:ajax.send()

步五:AJAX不断的监听服务端响应的状态变化,例如:ajax.onreadystatechange,后面写一个无名处理函数      

步六:在无名处理函数中,获取AJAX的数据后,按照DOM规则,用JS语言来操作Web页面

3.XMLHttpRequest(AJAX)对象常用事件,方法和属性

事件:

        ajax.onreadystatechange:表示AJAX异步对象不断监听服务端的响应,是由服务器程序触发,不是程序员触发

属性:

ajax.readyState==0:表示AJAX异步对象已创建好,但还没有调用open()方法

ajax.readyState==1:表示AJAX异步对象已调用open()方法,但还没有调用send()方法

      ajax.readyState==2:表示AJAX异步对象已调用send()方法,但请求还没有到达服务器端

  ajax.readyState==3:表示服务端已接收到AJAX异步对象的请求,正在处理响应中。。。

      ajax.readyState==【4】:表示AJAX异步对象已经完完全全接收到了服务器的响应信息,但接收到的数据不一定都正确

上述5种状态不是所有浏览器都相同,但状态4每种浏览器都相同

      ajax.status==200:表示AJAX异步对象接收到响应码,如果是200的话,表示一切正常

      ajax.responseText:表示从AJAX异步对象中获取HTML载体中的数据

ajax.responseXML:表示从AJAX异步对象中获取XML载体中的数据

方法:

      ajax.open(method,url,可选的boolean值)

AJAX异步对象准备发送异步请求

      参数一:以什么方式发送,常用的用GET或POST,大小写不敏感

      参数二:发送到什么地方去,常用Servlet或Struts2或SpringMVC来接收,

      参数三:默认值为true,表示AJAX对象以【异步】的方式提交到服务端

                 如果设置为false,表示AJAX对象以【同步】的方式提交到服务端

      ajax.setRequestHeader(“content-type”,”application/x-www-form-urlencoded”)

             表示将请求体中的内容,按照UTF-8的方式进行编码,只针对POST请求有效  

      ajax.send(content)

             AJAX异步对象真正发送异步请求

             参数一:表示HTTP【请求体】中的内容

                   如果是GET方式:content = null,如果强行传值到服务器,服务端收不到,返回NULL

                   如果是POST方式:content != null,例如:username=jack&password=123&role=admin

4.AJAX适合用在什么地方

AJAX【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】。

AJAX是一个和服务器无关的技术,即服务器可使用:JavaEE,.NET,PHP……这些技术都可。

AJAX只管向服务器发送请求,同时只管接收服务器的HTML或XML或JSON载体响应。

服务端不能使用转发或重定向到web页面,因为这样会起浏览器全面刷新,即只能以流的方式响应给浏览器。

5.验证用户名是否存在

Action中的方法:(Action中要有相应属性的参数set和get方法)

6.二级联动下拉框(xml方式)

Action中的方法:

 7.验证码

生成验证码:

使用验证码:

验证:

struts验证:

 

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/30769

(0)
优速盾-小U的头像优速盾-小U
上一篇 2025年6月18日 18:42
下一篇 2025年6月18日 23:04

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml