加入收藏 | 设为首页 | 会员中心 | 我要投稿 银川站长网 (https://www.0951zz.com/)- 云通信、基础存储、云上网络、机器学习、视觉智能!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

什么是Ajax 有哪些关键点概念及怎样运用

发布时间:2023-08-02 12:42:48 所属栏目:语言 来源:
导读:今天我们来学习关于“什么是Ajax,有哪些重点概念及怎样运用”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一下

今天我们来学习关于“什么是Ajax,有哪些重点概念及怎样运用”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一下吧。

什么是Ajax?

Ajax有哪些重点概念?

Ajax如何运用?

听说JQuery与Ajax更配?

一、Ajax简介。

1、AJAX全称:异步的JavaScript和XML

2、AJAX不是编程语言,是一种无需重新载入整个页面,能够更新部分网页的技术。

3、要想更新内容或者提交一个表单,就要重新载入整个页面;使用AJAX技术的页面,通过与后台服务器进行少量的数据交换,就可以实现异步局部更新。

4、同步和异步:

同步:需要更新内容或者提交表单时,需要对整个页面向服务器请求->服务器处理、响应->页面载入

如果错误,再次请求,等待,响应;需要对整个页面解析重新载入,很多时候等待的时间很长,让人很抓狂。

异步:针对页面部分内容进行请求,服务器处理响应,页面刷新载入这一部分;这中间不会影响页面其他交互,无需进行等待,提升了用户体验。

二、Ajax概念

1、XMLHttpRequest对象

IE5、IE6支持Active X对象。

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

在新浏览器上,创建对象很简单,使用构造函数:var xhr=new XMLHttpRequest();老浏览器可能不常用,但我们要考虑在里边,兼容老浏览器:

function createXHR(){

if(typeof XMLHttpRequest !="undefined"){

//如果浏览器不支持XMLHttpRequest对象,就使用IE5、IE6对象ActiveXObject

return new XMLHttpRequest();

}else if(typeof ActiveXobject !="undefined"){

if(typeof arguments.callee.activeXString !="string"){

var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],

i,len;

for(i=0,len=versions.length;i<len;i++){

try{

new new ActiveXObject(versions[i]);

arguments.callee.activeXString = versions[i];

break;

}catch(ex){

//

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

}else{

throw new Error("No XHR object available");

}

}

这个函数首先检测原生XHR对象是否存在,如果存在,就返回它的实例。XHR不存在,检测ActiveX对象;否则,抛出错误。

创建兼容的XHR对象就可以使用:var xhr=createXHR();

2、HTTP请求

在运用Ajax之前,我认为先了解HTTP更有助于理解Ajax方法。

HTTP是一种应用进程与服务器之间连接的协议,无状态协议,也就是没有记忆,每一次请求都需要重新建立连接。

HTTP请求过程:

1>建立TCP连接

2>Web浏览器向Web服务器发送请求命令

3>Web浏览器发送请求头信息

4>Web服务器应答

5>Web服务器发送应答头信息

6>Web服务器向浏览器发送数据

7>Web服务器关闭TCP连接

HTTP状态码:

1XX:信息类,表示收到Web浏览器请求,正在进一步处理中

2XX:成功,表示用户请求被正确接收,如200

3XX:重定向,表示请求没有成功,客户必须采取进一步动作

4XX:客户端错误,表示客户端提交的请求有错误,例如:404 NOT Found,意味着请求中所引用的文档不存在

5XX:服务器错误,表示服务器不能完成对请求的处理,如:500

3、XHR用法

向服务器发送请求,需要使用XMLHttpRequest对象的open()和send()方法。

发送请求:

xhr.open("get","example","false")//同步xhr.send(null);同步:JavaScript 会等到服务器响应就绪才继续执行。

异步:在等待服务器响应时执行其他脚本;

当响应就绪后对响应进行处理。

当服务器响应后会填充XHR对象属性

->responseText 获得字符串形式的响应数据。

->responseXML 获得 XML 形式的响应数据。

->status 响应的HTTP状态码

->statusText HTTP状态码说明

异步下检测XHR对象的readyState属性,请求过程中的活动阶段:

->0:未初始化,尚未调用open()方法

->1:启动,已经调用open()方法,但未调用send()方法

->2:发送,已经调用send()方法,尚未接到响应

->3:接收,已接收部分数据

->4:完成,已经接收全部响应数据。

readyState改变就会触发一次readyStatechange事件,可以利用这个事件来检测readyState变化的值。必须在open()之前指定onreadyStatechange事件处理程序。

var xhr=createXHR();

xhr.onreadyStatechange=function(){

if(xhr.readyState==4){

if(xhr.status >=200 && xhr.status<300){

alert(xhr.responseText);

}else{

alert("Request was unsuccessful:"+xhr.status);

}

}

}

xhr.open("get","example.txt",true);

xhr.send(null);

默认情况下,在发送XHR请求的同时,还会发送一些默认的头部信息。

使用 setRequestHeader() 可以设置自定义的请求头部信息:这个方法接收2个参数,头部字段的名称和头部字段的值。

setRequestHeader() 方法必须在open()后,send()前调用

xhr.open("get","example.txt",true); xhr.setRequestHeader("myheader","myvalue"); xhr.send(null);调用XHR对象的getRequestHeader() 方法,并传入头部字段名称可以取得相应的响应头部信息。

get请求、post请求

get 请求

常用于向服务器查询(获取)某些信息,需要注意传入的URL格式,查询的字符串参数名称和值都必须经过 encodeURIComponent() 进行编码,然后放到URL末尾;而且所有的名称和值和后一个需用"&"隔开。

xhr.open("get","example.php?name1=value1&name2=value2",true);可向现有url后添加查询字符串参数:

function addURLParam(url,name,value){

url +=(url.indexOf("?") == -1 ? "?" : "&");//检测url后是否已有参数

url +=encodeURIComponent(name) + "=" + encodeURIComponent(value);

return url;

}

//示例

var url="example.php";

//添加参数

url=addURLParam(url,"name","Nico");

//初始化请求

xhr.open("get",url,true);

post请求

下列情况使用:

->无法使用缓存文件(更新服务器上的文件或数据库)

->向服务器发送大量数据(POST 没有数据量限制)

->发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

如果需要像 HTML 表单那样 POST 数据;首先使用 setRequestHeader() 来设置 HTTP 头"Content-type"为"application/x-www-form-urlencoded",其次以适当格式创建字符串。

var xhr=createXHR();

//省略

xhr.open("POST","ajax_test.asp",true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

var form=document.getElementById("user-info");

xhr.send(serialize(form));

三、jQuery - AJAX

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

jQuery $.get() 方法

语法:$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

例子:

$("button").click(function(){

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});```

+ jQuery $.post() 方法

语法:$.post(*URL*,*data*,*callback*);

必需的 *URL* 参数规定您希望请求的 URL。

可选的 *data* 参数规定连同请求发送的数据。

可选的 *callback* 参数是请求成功后所执行的函数名。

例子:

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

},

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求(name 和 city)一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数,对它们进行处理,然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。

######四、运用Ajax

现在一般都用JQuery-Ajax,学习了之后,我还是有疑惑,知识清楚了之后如何运用?用在哪里?

想着给自己出个demo运用刚学的知识,等待更新。

(编辑:银川站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章