在制作网站的时候,网站的网页经常需要跟后台进行交互,进行交互的时候,按照传统的方法,需要重新刷新一下网页,更新的内容才会显示出来,然而自从ajax诞生以来,进行网页内容的更新已经不需要我们去重新刷新网页了,直接直观地显示在页面上,不影响页面的其他操作,这就是ajax的异步请求,借助ajax,只需4步,轻松实现异步请求,接下来我们来通过一个案例来实现这个功能。
需求:
现在我们想要在下拉列表中选择一个人名,选择之后,就在下面显示这个人的基本信息,用户名,年龄和注册日期等。
步骤:
1、制作一个下拉按钮和div
新建一个html的页面,在页面中新建一个下拉列表和一个div,这个下拉列表是用来显示姓名的,供用户进行选择的,而div这个框则是显示服务器返回来的用户的信息的,在表单中,增加了一个onchange的事件,用户选择了姓名之后就会触发这个事件,代码如下:
form
selectname=persononchange=ajax_change(this.value)
optionvalue=请选择一个人名/option
optionvalue=limingliming/option
optionvalue=li_haoli_hao/option
optionvalue=lili/option
/select
/form
divid=info个人信息将会显示在这里...../div
2、ajax异步请求。
ajax的异步请求分为3步,代码放在script的标签里面,首先是新建一个XMLHttpRequest的请求对象,然后是状态改变时触发的函数(onreadystatechange),最后就是发送请求,请求用get和post请求两种,这里用的是post请求,实例如下:
info_