AJax技术

JavaScript学习总结之JS、AJAX应用(2)

字号+ 作者:H5之家 来源:H5之家 2016-02-06 15:02 我要评论( )

这里需要注意的是字符集编码问题,在使用 AJAX 时,所有的文件都必须是统一的编码格式,包括 HTML 、JS 文件和被读的文件,比如都是 UTF-8 或者都是 GB2312,上面实例中用于演示的 TXT 文件,默认输入英文,在保存

  这里需要注意的是字符集编码问题,在使用 AJAX 时,所有的文件都必须是统一的编码格式,包括 HTML 、JS 文件和被读的文件,比如都是 UTF-8 或者都是 GB2312,上面实例中用于演示的 TXT 文件,默认输入英文,在保存时默认编码为 ANSI,如果我们输入的是汉字,在保存时不改为与页面相同的编码格式 UTF-8,那么在点击按钮后,网页上就显示的乱码,所以在保存时,一定要注意切换文件的编码格式。

  下面我们来分析一下 AJAX 的工作原理。

  4、XHR 创建对象

  XHR 是 XMLHttpRequest 的简写,是 AJAX 的基础,用于在后台与服务器交换数据。

  所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象,老版本的 IE 浏览器(IE6)则使用 ActiveXObject,为了兼容各种浏览器,可以做一个判断,如果支持 XMLHttpRequest 对象,则创建该对象,如果不支持,则创建 ActiveXObject 。

 

var oAjax;

// IE+, Firefox, Chrome, Opera, Safari

if(window.XMLHttpRequest){

oAjax = new XMLHttpRequest();

}

// IE

else{

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

}

  因为所有现代浏览器和 IE 高版本浏览器都支持 XMLHttpRequest 对象,所以在创建对象时,也就不用做兼容性处理了,这里只是了解一下。在 IE 浏览器中 ActiveX 是插件的意思,也就是说 IE6 中的 AJAX 是通过一个插件来完成的,虽说是插件,但是在 IE6 浏览器中已经默认安装了。

  在上面的代码中,在做判断时使用了 window.XMLHttpRequest ,我们都知道全局变量是 window 上的一个属性,在 JS 中,如果使用没有定义的变量,会报错,比如:alert(a)。而如果使用没有定义的属性,则不会报错,而是 undefined,比如:alert(window.a)。IE6 不支持 XMLHttpRequest,所以如果直接使用,就会报错,而如果把他定义为 window 的属性,那么则是 undefined ,未定义在 if 判断语句中代表假,也就是 fasle,而这正是我们需要的。

  5、连接服务器

  将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

oAjax.open('GET', 'ajax/demo.txt', true);

oAjax.send(); 

  open(method, url, async) 规定请求的类型、URL 以及是否异步处理请求。第一个参数 method,用于规定请求的类型,GET 或

POST 。第二个参数 URL,用于设置文件在服务器上的地址,该文件可以是任何类型的文件,比如 .txt 、 .xml 和 .json,或者服务器脚本文件,比如 .php (在传回响应之前,能够在服务器上执行任务)。第三个参数 async,用于定义是否异步传输,true(异步)或 false(同步)。

  send(string) 用于将请求发送到服务器,参数 string 仅用于 POST 请求。

  下面来看两个问题。

  (1)、GET 还是 POST?

  GET 和 POST 常用于提交表单,我们也并不陌生,表单的提交默认是使用 GET 方式。

  与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

  但是,在以下情况中,请使用 POST 请求:

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

    ②、向服务器发送大量数据(POST 没有数据量限制)。

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

  最实用的判断方法:GET 用于获取数据,比如浏览贴子,POST 用于上传数据,也就是向服务器传递数据,比如用户注册。

  GET 和 POST 的区别:

  GET:在 URL 中传输数据,安全性弱,容量小,一般 URL 的长度最大为 4K 到 10K,长度是有限制的。

  POST:不在 URL 中传输数据,相对安全性强,容量大,容量可达到2G,再大就可以使用控件,真正的安全就只有 https 协议。

  缓存:GET 有缓存,POST 没有缓存。

  所以,AJAX 一般都为 GET 方式。当然除了 GET 和 POST 方法之外还有很多种方法,最常用的还是这两种。

  在 AJAX 基础的实例中,因为我们使用了 GET 请求,那么还有一个问题就是缓存的问题,所谓缓存,就好比一个网站打开一次之后,再打开的话,速度就会快一些,这就得益于缓存,那么缓存实际上就是一个网站,在第一次打开的时候,才是真正的从服务器上请求,之后都是从本地读取,从硬盘中读取数据肯定要快一些,至少比网络要快很多。那按照这样说,缓存岂不是个好东西,还有什么问题呢?我们来看一下 AJAX 中的实例,我们打开过一次了,也就是说已经有了本地缓存,那么如果这时候给 TXT 文件再加入一些文字,会如何呢?会发现点击按钮后,添加进去的文字不显示,过一会才显示,这就是缓存的问题,Chrome 和 FF 缓存还不严重,IE 浏览器的缓存比较严重。这个问题在很多时候会给我们带来一些困扰,比如是一个股票网站,需要实时更新最新的股票价格,这个价格一直在变,如果不阻止缓存,那么这个价格就很难做到实时更新,所以如果是时常在变的数据,就需要把缓存阻止掉。缓存的工作原理是根据 URL 来缓存的,同一个地址读取一次,因此要阻止缓存,只要让 URL 一直在变,也就是向 URL 添加一个唯一的 ID 。

  我们平时在浏览网页时,都见过这种样子,比如在使用百度搜索时,百度域名后边跟了个问号,然后是一堆什么等于什么:https://www.baidu.com/s?wd=前端&rsv_spt=1&rsv_iqid=0xe9146bd400052360&issp=1&,这个问号后边的数据就被称为 GET 数据。如果我们给 TXT 文件后边也加入 GET 数据,?a=2,或者可以自定义什么等于什么,这样对文件的显示内容是没有任何影响的,那么对于缓存的问题,我们就可以对 oAjax.open('GET', '/ajax/demo.txt', true) 第二个参数 URL 做一些修改,'ajax/demo.txt?t=' + Math.random(),Math.random() 方法返回一个 0-1 之间的随机小数,那么每次返回的都不同,也可以添加 'ajax/demo.txt?t=' + new Date().getTime(),getTime()用于获取当前的时间戳,也就是1970年元旦到当前的毫秒数,那么使用 get Time() 返回的数据每一次都不一样,因为是毫秒数,所以1秒之内就有很多种可能,他的值一直在变,这样就能很好的解决缓存问题。

  这里要注意的是,在使用 GET 请求时,为了避免只是得到缓存的结果,需要向 URL 添加一个唯一的 ID,使 URL 每次都不一样。

  如果需要通过 GET 方法发送信息,可以把信息添加在 URL 中。

  如果需要像 HTML 表单那样传输 POST 数据,可以使用 setRequestHeader() 来添加 HTTP 头,然后在 send() 方法中规定发送的数据。

  setRequestHeader(header, value) 用于向请求添加 HTTP 头,第一个参数 header 规定头的名称,比如 Content-type,第二个参数规定头的值。

  (2)、true 还是 false?

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax学习之什么是Ajax,Ajax原理

    Ajax学习之什么是Ajax,Ajax原理

    2016-01-25 18:01

  • 学习JavaScript设计模式之代理模式

    学习JavaScript设计模式之代理模式

    2016-01-25 17:02

  • javascript、jquery、AJAX总结

    javascript、jquery、AJAX总结

    2016-01-25 17:00

  • ajax学习笔记(二)

    ajax学习笔记(二)

    2016-01-25 15:04

网友点评
o