欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

Ajax的概述与实现过程

程序员文章站 2022-03-14 09:21:01
...
一、ajax概述

1、Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新技术,而是对现有技术的综合利用。这一技术能够向服务器请求额外数据而无需刷新页面,带来了更好的用户体验

2、Ajax技术的核心是XMLHttpRequest对象(简称XHR),这是由微软首先引入的一个特性。在XHR出现之前,Ajax式的通信必须借助一些hack手段来实现,大多数是使用隐藏的框架或内嵌框架。

3、XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步的方式从服务器取得更多的信息,意味着用户单击后,可以不必刷新页面也能获取新数据。也就是说可以使用XHR对象取得新数据,然后再通过DOM将新数据插入到页面中

4、虽然Ajax名字中有XML的成分,但是呢,Ajax通信与数据格式无关,这种技术就是无须刷新页面即可从服务器取得数据,但不一定是XML数据

二、操作:原生ajax和jQuery中封装的ajax

1、原生ajax:

ajax作用:发送请求(设置请求setRequest) 接收响应(getResponse)

A、ajax原生方式发送请求:

Ajax中最重要也是最固定的部分就是http请求。

1)建立连接:(IE7及以上版本都支持XMLHttpRequest)

var xhr = new XMLHttpRequest(); //创建异步请求对象

2)Get请求:格式必须是(url?name1=value1&name2=value2)

xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接

3)Post请求

xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/
xhr.send('name=rose&age=20'); //请求报文体

4)get和post请求的区别:

★get不需要设置请求头,而post需要设置请求头

★get的数据传递通过url进行,而post的数据在send方法中传递

B、ajax原生方式接收响应:

/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
 if(xhr.status==200 && xhr.readyState==4){
 var result=xhr.responseText;
 console.log(result); //输出从服务器中获取到的数据
 //接下来就可以对数据进行相应的处理了
 }
 };

C、处理响应数据:

/*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
var result;
/*获取响应报文中的Content-Type*/
var ct=xhr.getResponseHeader("Content-Type");
/*判断Content-Type,进行数据的解析*/
if(ct.indexOf("xml") != -1){
result=xhr.responseXML;
}
else if(ct.indexOf("json") !=-1){
result=JSON.parse(xhr.responseText);
}
else{
result=xhr.responseText;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};

jQuery中封装的ajax

$.ajax({
type: 请求方式(get/post),
url: "register.php",
data: 发送请求数据,
beforeSend:function(){返回false可以取消本次ajax请求},
success:function(result){ 成功响应后调用 },
error:function(err){ 错误响应时调用 },
complete:function(){ 响应完成时调用(包括成功和失败) }
});

jQuery中提供了专门的方法来序列化表单:

$('form').serialize(): //序列化表单(即格式化key=val & key=val);

三、响应

我们需要监听服务器的响应状态,然后对从服务器中获取的数据做相应的处理。

1) onreadystatechange是JavaScript事件中的一种,用于监听XMLHttpRequest的状态

2) readystate:响应状态,返回XMLHTTP请求的当前状态

Ajax的概述与实现过程

3) status:服务器的响应码

常见响应码:200—服务器成功返回网页

404—请求网页不存在

503—服务不可用

关于服务器响应码,详情请看————网络传输协议(http协议)

相关标签: Ajax