JavaScript之Ajax
简介:AJax是在2005年被Adaptive Path的Jesse James Garrett发明的,用户概括异步加载页面内容的技术---说通俗点,Ajax就是实现局部页面通过JavaScript与后台服务器交互,并刷新页面的功能。
局限:AJax依赖于JavaScript,所以可能会有浏览器不支持(现在基本不用考虑这种情况),而且搜索引擎程序可能不会抓取到有关的内容。
下面就要开始说重点了:
1、Ajax的核心对象-XMLHttpRequest对象
这个对象充当着浏览器中的JS脚本(相当于客户端)与服务器之间的中间人的角色。以往的请求都由浏览器发出,而JavaScript通过这个对象可以自己发出请求,同时也自己处理服务器的响应。其相关的标准还比较新(参见HTML5),但这个对象的历史可谓久远,所以几乎得到了所有浏览器的支持,但问题是,不同浏览器实现XMLHttpRequest对象的方式都不太一样。为了保证跨浏览器,你不得不为同样的事情,写不同的代码分支。
这一点在IE中就很明显,不同的IE浏览器创建XMLHttpRequest对象的代码不同微软最早在IE5中以ActiveX名叫XMLHttp的对象,所以在IE中创建新的XMLHttp对象的代码就应该这样写:
var request=new ActiveXObject("Msxml2.XMLHTTP.3.0");
其他浏览器则基于XMLHttpRequest来创建对象:
var request=new XMLHttpRequest();
更麻烦的是不同的IE版本使用的XMLHTTP对象也完全不相同。为了兼容所有的浏览器,创建XMLHttpRequest对象的函数如下:
function getXMLHttpRequestObject() {
if (typeof XMLHttpRequest == "undefined") {
XMLHttpRequest = function () {
try {
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}
catch (e) {
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) { }
return false;
}
} else {
return new XMLHttpRequest();
}
}
获取完XMLHttpRequest对象之后,下面来说下XMLHttpRequest的方法,他有很多的方法,其中最有用的是open()方法。
这个方法有三个参数:
(1)、第一个参数,用来指定讲要访问服务器上的文件。
(2)、第二个参数,用来指定访问的请求类型:GET、POST、SEND。
(3)、请求的方式是否是已异步的方式请求。
介绍完了,话不多说,上代码:
js代码:
//JS Ajax starting
function getNewContent() {
var request = getXMLHttpRequestObject();
if (request) {
request.open("GET", "upload/Leaning Method.txt", true);
request.onreadystatechange = function () {
if (request.readyState == 4) {
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementsByTagName("body")[0].appendChild(para);
}
};
request.send(null);
} else {
alert("Sorry,your browser doesn't support XMLHttpRequest!");
}
}
//JS Ajax Ending
下面就来介绍下,这个Ajax方法中,一些相关的方法:
1、onreadystatechange---这是一个事件处理函数,它会在服务器给XMLHttpRequest对象送回响应的时候触发执行 ---服务器对客户端的响应一开始就触发
注意:在为onreadystatechange指定引用时,不要在函数后面加括号,如request.onreadystatechange()因为加括号表示立即调用该函数,而我们只想把我们自定义的函数的引用(不是函数结果)赋值给onreadystate-change属性;
2、send()---在指定了请求的目标,明确了处理完成后的响应之后,就可以用send方法来发送请求了
3、readystate---服务器在向XMLHttpRequest对象发回响应时,该对象有许多属性可以用 ---在触发onreadystatechange事件处理函数后(服务端对客户端开始响应),XMLHttpRequest对象将被赋予很多的属性和属性值下面来简单说下:
readyStates属性:浏览器会在不同阶段更新readyState属性的值,它有5个可能的值:
0表示未初始化
1表示正在加载
2表示加载完毕
3表示正在交互
4表示完成
只要readyState属性值变成了4,就可以访问服务器发送回来的数据了;
4、访问服务器发送回来的数据要通过两个属性来完成。
(1)responseText属性---这个属性用于保存文本字符串形式的数据。
(2)responseXML属性---这个属性用于保存Content-Type头部中指定位text/xml的数据,其实是一个DocumentFragment对象。你可以使用各种DOM方法来处理这个对象。而这个是真是XMLHttpRequest这个名称里有XML的原因。
下面就要说一下关于Ajax技术,新手不得不注意并且重试的几个点,这几个点我们在平时开发中会经常遇到,如果我们在不清楚知道这几个点的情况下,我们的程序很可能会遇到问题:
1、Ajax同源策略,使用XMLHttpRequest对象发送的请求只能访问与其所在的html同一个域中的数据,不能向其他域发送请求。
2、有些浏览器会限制Ajax请求使用的协议。比如在Chrome中,如果你使用file://从自己的硬盘里加载example.txt ,浏览器就会报(跨域请求只支持HTTP协议)的错误消息。
3、重点:就是异步请求有一个容易会被忽略的问题,就是异步性,就是脚本在发送XMLHttpRequest请求之后,仍然会继续执行,不会等待响应返回。如果脚本依赖于服务器的响应结果,那么就应该把脚本代码都转移到指定给onreadystatechange的那个函数中去;
JavaScript之Ajax的更多相关文章
- 最新JavaScript、Ajax典藏级学习资料下载分类汇总 (2011年12月21日更新)
其他网站开发相关资料 超强HTML和xhtml,CSS精品学习资料下载汇总 最新htm ...
- 初识JavaScript,Ajax,jQuery,并比较三者关系
一.基本认识 1.JavaScript 定义: javaScript的简写形式就是JS,是由Netscape公司开发的一种脚本语言,一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态 ...
- JavaScript实现Ajax小结
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<TCP的三次握手和四次挥手> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临 ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- javascript版Ajax请求
什么是Ajax请求,Ajax也就是“Asynchronous JavaScript and XML”(异步JavaScript和XML),无刷新数据读取.能减少流量的消耗,也提高了浏览的流畅性,给用户 ...
- Javascript与Ajax
不使用jquery来处理ajax请求该怎么做? 首先要明确html中的某些数据需要从服务端获得,也就是客户端向服务端请求(request)数据,服务端就响应(response)这个请求,把客户端要的数 ...
- javascript进阶——Ajax
统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...
- Javascript and AJAX with Yii(在yii 中使用 javascript 和ajax)
英文原文:http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii /*** http://www.yiiframework. ...
- javascript实现ajax
什么是 ajax ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 htt ...
- JavaScript和ajax 跨域的案例
今天突然想看下JavaScript和ajax 跨域问题,然后百度看了一下,写一个demo出来 <!DOCTYPE html> <html xmlns="http://www ...
随机推荐
- web本地存储-IndexedDB
IndexedDB, HTML5中的一种数据存储方式,索引数据库. 一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称.一个数据库可包含多个对象存储,一个对象存储相当于 ...
- user Collaborative Filtering
---恢复内容开始--- 算法步骤: 1.计算用户相似度 2.对于特定用户,选出k个最相似的用户,将这些用户评价过的前k好的物品推荐给该用户 用户相似度 度量: 其中|N(u)|表示用户u评价过的 ...
- 如何在TableView上添加悬浮按钮
如果直接在TableVIewController上贴Button的话会导致这个会随之滚动,下面解决在TableView上实现位置固定悬浮按钮的两种方法: 1.在view上贴tableView,然后将悬 ...
- 传纸条(一)(双线程dp)
传纸条(一) 时间限制:2000 ms | 内存限制:65535 KB 难度:5 描述 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行 ...
- 字符串查找--B中是否有元素不在A中
#include <stdio.h> int main(int argc, char const *argv[]) { char str[26]="AFDKJASD"; ...
- ruby on rails出现的问题ActiveModel::ForbiddenAttributesError
首先分清楚我们在搞rails时.看资料和所使用的环境的版本号是否同样.看的资料是rails3.2,电脑配置的环境是4.0,就会出现这样的安全防范措施的问题. 这类问题大多出如今new或者create两 ...
- 我的RTOS 之六 -- Touch移植(s5pv210+threadx+ucgui+touch)
非常久没有关注RTOS了,所以也一直没有更新.近期闲了,把GPIO I2C调通了.简单移植了Touch.在S5PV210上使用. 调试I2C时.废了非常多周折,最后借助示波器才发现一个小小的错误.折腾 ...
- MVC5 Controller简要创建过程(1):ControllerFactory的创建
即将离职,闲来无事回顾下MVC的源码,到了Controller创建这里,由于流程有点复杂,鉴于自己记性不太好,索性就记录一下吧,方便日后参照. 首先看MvcHandler: public class ...
- 在.NET下学习Extjs(第四个案例 Extjs扩展的原理)
1.构建如下代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...
- 20151225--easyUI
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...