摘要:JavaScript能流行,一个很重要的原因是AJAX技术的应用。在网页中有很多的应用。举两个常见的AJAX应用的例子:

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-AJAX是什么?怎么在JavaScript中使用?

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

JavaScript能流行,一个很重要的原因是AJAX技术的应用。在网页中有很多的应用。举两个常见的AJAX应用的例子:

1、 在搜索中,我们输入关键字时,网页会实时展现搜索结果;这是用AJAX实现的。

2、 使用地图时,地图会根据用户显示的位置不停的更新。这也是通过AJAX实现。

那么什么是AJAX呢?

AJAX全称为Asynchronous JavaScript And XML直译就是异步的JavaScript和XML(这里我们主要介绍下JavaScript中AJAX的应用)

通常当JavaScript向服务器发送请求获取数据时,服务器会返回数据。在传统没有使用AJAX的网页中,需要刷新页面使其重新加载。而AJAX可以使网页在不重新加载页面的情况下对网页的局部进行更新。(比如,当你要放大地图的时候,你会不断的向服务器请求地图当前位置的详细信息,服务器返回数据给你,这里我们并不需要重新加载整个页面,不然用户体验就太差了。而是局部更新页面。)

由于我不可能在这写一个地图这样复杂的例子,而为了演示AJAX的使用,我借用了秒秒学的一个简单示例:

// 简单的AJAX举例。

// 1: 创建请求变量

var myRequest;

// 浏览器的特征检查。

if (window.XMLHttpRequest) { //若支持,则是火狐、谷歌等浏览器。

myRequest = new XMLHttpRequest();

} else if (window.ActiveXObject) { // 若不支持, 则是IE浏览器。

myRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

// 2: 为请求添加事件处理代码。

myRequest.onreadystatechange = function(){

console.log("匿名函数被调用!");

console.log(myRequest.readyState);

if (myRequest.readyState === 4) {

var p = document.createElement("p");

var t = document.createTextNode(myRequest.responseText);

p.appendChild(t);

document.getElementById("mainContent").appendChild(p);

}

};

// 3: 配置发送请求

myRequest.open('GET', 'simple.txt', true);

myRequest.send(null);

//....

使用AJAX主要分三部分,如示例中的

1、 创建请求的变量。

在script文件中,首先声明XMLHttpRequest对象,这也是题主说的Ajax的核心。浏览器页面能通过XMLHttpRequest对象和服务器进行通讯。因为这个对象的创建因浏览器的不同而有区别。所以我们要用if语句判断XMLHttpRequest是否存在。

2、 为请求添加事件处理代码

创建好XMLHttpRequest对象后,就可以向服务器发送请求了,不过我们首先处理服务器响应的事件。当服务器响应后会触发myRequest对象的onreadystatechange事件。

在onreadystatechange事件中我们看到myRequest调用了readyState属性,readyState有4个值表示目前响应所在的阶段,各数值表示如下:

l 1:请求已经建立,但是还没有发送(还没有调用 send())。

l 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。

l 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。

l 4:响应已完成;您可以获取并使用服务器的响应了。

我们一般只关心readyState的值为4的情况,表示响应已完成。

3、 配置发送请求

使用open方法配置请求。它有三个参数:

1、第一个参数表示用GET获取服务器中的数据。

2、第二个参数是一个服务器地址,这里我们用本地的simple.txt代替,省去创建服务器的麻烦。

3、第三个参数true表示请求是异步的,即当请求发送后,JavaScript不会为了等待服务器的响应而阻塞,它会继续执行后续代码。

配置好请求后,用send方法发送请求,这里给send传递的参数是null,若有其它参数需要发送,也可以传递给send方法。

JavaScript能流行,一个很重要的原因是AJAX技术的应用。在网页中有很多的应用。举两个常见的AJAX应用的例子:

1、 在搜索中,我们输入关键字时,网页会实时展现搜索结果;这是用AJAX实现的。

2、 使用地图时,地图会根据用户显示的位置不停的更新。这也是通过AJAX实现。

那么什么是AJAX呢?

AJAX全称为Asynchronous JavaScript And XML直译就是异步的JavaScript和XML(这里我们主要介绍下JavaScript中AJAX的应用)

通常当JavaScript向服务器发送请求获取数据时,服务器会返回数据。在传统没有使用AJAX的网页中,需要刷新页面使其重新加载。而AJAX可以使网页在不重新加载页面的情况下对网页的局部进行更新。(比如,当你要放大地图的时候,你会不断的向服务器请求地图当前位置的详细信息,服务器返回数据给你,这里我们并不需要重新加载整个页面,不然用户体验就太差了。而是局部更新页面。)

由于我不可能在这写一个地图这样复杂的例子,而为了演示AJAX的使用,我借用了秒秒学的一个简单示例:

// 简单的AJAX举例。

// 1: 创建请求变量

var myRequest;

// 浏览器的特征检查。

if (window.XMLHttpRequest) { //若支持,则是火狐、谷歌等浏览器。

myRequest = new XMLHttpRequest();

} else if (window.ActiveXObject) { // 若不支持, 则是IE浏览器。

myRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

// 2: 为请求添加事件处理代码。

myRequest.onreadystatechange = function(){

console.log("匿名函数被调用!");

console.log(myRequest.readyState);

if (myRequest.readyState === 4) {

var p = document.createElement("p");

var t = document.createTextNode(myRequest.responseText);

p.appendChild(t);

document.getElementById("mainContent").appendChild(p);

}

};

// 3: 配置发送请求

myRequest.open('GET', 'simple.txt', true);

myRequest.send(null);

//....

使用AJAX主要分三部分,如示例中的

1、 创建请求的变量。

在script文件中,首先声明XMLHttpRequest对象,这也是题主说的Ajax的核心。浏览器页面能通过XMLHttpRequest对象和服务器进行通讯。因为这个对象的创建因浏览器的不同而有区别。所以我们要用if语句判断XMLHttpRequest是否存在。

2、 为请求添加事件处理代码

创建好XMLHttpRequest对象后,就可以向服务器发送请求了,不过我们首先处理服务器响应的事件。当服务器响应后会触发myRequest对象的onreadystatechange事件。

在onreadystatechange事件中我们看到myRequest调用了readyState属性,readyState有4个值表示目前响应所在的阶段,各数值表示如下:

l 1:请求已经建立,但是还没有发送(还没有调用 send())。

l 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。

l 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。

l 4:响应已完成;您可以获取并使用服务器的响应了。

我们一般只关心readyState的值为4的情况,表示响应已完成。

3、 配置发送请求

使用open方法配置请求。它有三个参数:

1、第一个参数表示用GET获取服务器中的数据。

2、第二个参数是一个服务器地址,这里我们用本地的simple.txt代替,省去创建服务器的麻烦。

3、第三个参数true表示请求是异步的,即当请求发送后,JavaScript不会为了等待服务器的响应而阻塞,它会继续执行后续代码。

配置好请求后,用send方法发送请求,这里给send传递的参数是null,若有其它参数需要发送,也可以传递给send方法。

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-AJAX是什么?怎么在JavaScript中使用?

全部内容,希望文章能够帮你解决

js实例教程-AJAX是什么?怎么在JavaScript中使用?

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过