回顾ajax(asynchronous javascript and xml)

一、ajax是什么?

ajax是一种用来改善用户体验的技术,其实质是利用浏览器提供的一个特殊对象(XMLHttpRequest对象)异步地向服务器发送请求,服务器一般只需要返回部分数据(文本或者xml文档),浏览器利用这些数据更新当前页面。整个过程,页面刷新,不打断用户的操作。
注:异步:ajax对象向服务器发送请求时,浏览器不会销毁当前页面,用户仍然可以对当前页面做其它操作。

二、ajax对象如何获得
可在一个js文件里面添加:

function getXhr(){
				var xhr = null;
				if(window.XMLHttpRequest){
					//非ie浏览器
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject(
					'Microsoft.XMLHttp');
				}
				return xhr;
			}

调用即可。

三、ajax对象的几个重要性质
1)onreadystatechange:用来绑订一个事件处理函数(该函数用来处理readystatechange事件)。
注:当ajax对象的readyState属性发生了改变,比如,从0变成了1,就会产生readystatechange事件。
2)readyState:有5个值,分别是0,1,2,3,4,表示ajax对象与服务器之间通信的状态。比如值为4时,表示ajax对象已经获得了服务器返回的所有的数据。
3)responseText:获得服务器返回的文本。
4)responseXML:获得服务器返回的xml文档。
5)status:获得服务器返回的状态码。

四、编程步骤
1、引入js文件、编写事件处理函数f1

           function f1(){


          }

2、在处理函数里面获取ajax对象

var xhr = getXhr();

3、使用ajax对象发送请求
1)get请求

xhr.open('get','check_uname.do?uname=Tom',true);	
				xhr.onreadystatechange=f1;
				xhr.send(null);	

注:
true:发送异步请求(浏览器不会销毁
当前页面,用户仍然可以对当前页面做其它
操作)。
false:发送同步请求(浏览器不会销毁
当前页面,浏览器会锁定当前页面,用户
不能够对当前页面做其它操作)。

4、编写服务器端的程序,一般不需要返回
完整的页面,只需要返回部分数据。

发送ajax完整的代码:

<script type="text/javascript">
			function check_uname(){
				//step1,获得ajax对象
				var xhr = getXhr();
				//step2,使用ajax对象发请求
				xhr.open('get',
				'check_uname.do?uname='+$F('username'),true);
				xhr.onreadystatechange=function(){
					if(xhr.readyState == 4){
						//step4,处理服务器返回的数据
						var txt = xhr.responseText;
						//innerHTML: 读取或者修改节点的
						//html内容。
						$('uname_msg').innerHTML = txt;
					}
				};
				xhr.send(null);
			}	
		</script>

5、发送post请求

xhr.open('post','check_uname.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('uname=' + $F('username'));
**注:
	按照http协议要求,发送post请求时,必须提供
"content-type"消息头。而ajax对象默认情况下生成
的请求数据包里面,没有提供该消息头,需要调用
setRequestHeader方法来添加。**
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

console.log("")

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值