Ajax帖子

初次接触Ajax是，主要是了解了一点Ajax的概念。Ajax的英文全称是（Asynchronous JavaScript and Xml）即异步的javascript和xml，它是一种无需重新加载整个网页的情况下，能够更新部分网页的技术（创建快速动态网页）。

　　　

　　　Ajax的基本运用步骤：

1.首先，创建ajax

2.然后通过ajax连接服务器

3.用创建的ajax对象发送请求

4.接受服务器的返回

　　　其实这也不难理解，我们可以想想我们平时是如何打电话的

1.首先需要一个手机-----------------------创建ajax

2.通过手机来连接你通信的对象--------通过ajax连接服务器

3.接通电话后，你再来通话--------------用创建的ajax对象发送请求

4.接受另一个通信对象的返回信息-----接受服务器的返回

 

　　　我们来简单操作一下，然后一步一步完善：

1.创建ajax对象：

Var oAjax = new XMLHttpRequest();

Ajax的核心技术就是XMLHttpRequest对象，用于后台与服务器交换数据。

2.连接服务器：

　　　oAjax.open(‘GET’,’a.txt’,true);

　　　open()方法接受3个参数：要发送请求的类型、请求的URL(被连接的地址)、是否异步请求（用布尔值表示，true表示是异步方式）

3.发送请求

　　　oAjax.send();

4.接受返回

　　　首先我们来了解几个属性：

　　　1）responseText：ajax请求返回的内容被存放到这个属性下面

　　　2）readyState:：判断浏览器和服务器进行到哪一步了通过数值来判断

　　　2.1）0---（未初始化）还没调用open()方法

　　　2.2）1---（载入）已调用send()方法，正在发送请求

　　　2.3）2---（载入完成）send()方法完成，已经收到全部响应内容

　　　2.4）3---（解析）正在解析响应内容

　　　2.5）4---（完成）响应内容解析完成，可以在客户端调用了

　　　3）onreadyStateChange：当readyState状态值改变的时候触发的事件

　　　4）Status：服务器状态（200表示成功），http状态码

oAjax.onreadystatechange = function(){

　　　//判断，如果响应内容完成

　　　If(oAjax.readyState == 4){ //读取完成，但并未成功，比如，文件出错、地址不对

　　　If(oAjax.status == 200){ //http状态码，200表示成功

　　　//放一个函数，表示当成功的时候干的事情

　　　}else{ //如果读取文件失败，干的事情

　　　If(fnald){

　　　//放一个函数，表示当失败的时候干的事情

　　　}

　　　}

　　　}

}

 

　　　现在我们来完善：

对于第1步：

　　　由于IE6不兼容XMLHttpRequest((),XMLHttpRequest()在Chrome和firefox当中是兼容的，为IE6加入Microsoft.XMLHTTP是兼容的，所以来做兼容：

　　　var oAajx = null;

　　　If(window.XMLHttpRu
d85a
quest){

　　　oAjax = new XMLHttpRequest();

　　　}else{

　　　oAjax =  new  ActiveXObject(‘MicrosoftXMLHTTP’);

　　　}

　　　

对于第2步：

　　　由于oAjax.open(‘GET’,’a.txt’,true);连接一次就地址不再改变，那么ajax就不会再次发送请求，就会造成，服务器的内容改变了，而浏览器内容还未更新，所以可以利用时间不停在变来让URL时刻不一样改成:

　　　oAjax.open(‘GET’,’a.txt?t=’+new Date().getTime(),true);

　　　但是，如果后端接收一个变量，它的名字也为t的话，会造成冲突，可能会覆盖。

　　　改为：

　　　 oAjx.open('get','aa.txt?'+new Date().getTime(),true);

　　　

对于第4步：

　　　举例，写出要完成的函数：

　　　If(oAjax.readyState == 4){ //读取完成，但并未成功，比如，文件出错、地址不对

　　　If(oAjax.status == 200){ //http状态码，200表示成功

　　　//放一个函数，表示当成功的时候干的事情

　　　fnSucc(oAjax.responseText); //获取从服务器发送回来的文本

　　　}else{ //如果读取文件失败，干的事情

　　　If(fnald){

　　　//获取失败对应的状态码，一般为404，表示读取文件失败

　　　fnFaild(oAjax.status);

　　　}

　　　}

　　　}

}

 

 

 

最后的代码如下：

 

function ajax(url,fnSucc,fnFaild){

    //1.创建ajax对象  

var oAjax = null;

　　　if(window.XMLHttpRequest){

         oAjax = new XMLHttpRequest();

     }

    else{

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

     }

  //2。连接服务器   

　　　  oAjax.open('GET','a.txt?'+new Date().getTime(),true);

 

    //3.发送请求   

  oAjax.send();

 

    //4.接收返回,ajax以一个事件的形式存在，当服务器的信息返回的时候这个事件会被调用。  

   oAjax.onreadystatechange = function(){

         if(oAjax.readyState == 4) {

            if(oAjax.status == 200) {

             fnSucc(oAjax.responseText);

            }

            else{

                if(fnFaild){

                fnFaild(oAjax.status);

                }

            }

        }

    }

 

}

 

 

注意：Ajax原理-应用中get和post的区别处理

get方式的问题：

如何缓存？

    以当前访问地址进行缓存

 

解决：（不一样的地址）

    1.缓存：在 url? 后面连接一个随机数，时间戳（记住：若有数据在url？后面，要加上&）

        eg: oAjx.open('get','xx.txt?username=Tom&age=30&t=' + new Date().getTime(),true);

        修改：（去掉't='）如果后端接收一个变量，它的名字也为t的话，会造成冲突,可能覆盖。

                eg: oAjx.open('get','xx.txt?username=Tom&age=30&' + new Date().getTime(),true);

 

乱码问题：编码encodeURI

                eg: oAjx.open('get','xx.txt?username='+encodeURI(习大大)+'&age=30&' + new Date().getTime(),true);

 

post方式的问题：

（1.post没有缓存问题，它是提交数据

  2.post方式无需编码）

post方式，数据放在send()里面作为参数传递。

 

    oAjx.send('username=Tom&age=30');

    在发送数据的时候，oAjx是没有默认值的,oAjx没有默认值告诉后端提交的数据是文本的

    解决：（手动告诉后端）设置请求头，告诉后端，发送的文档的类型是什么类型

        告诉后端提交的数据是经过xx编码的，让后端解析。

 

//声明发送的数据类型（告诉后端发送数据的类型）

oAjx.setRequsetHeader('content-type','application/x-www=form-urlencode');

//发送

oAjx.send('username=Tom&age=30');

 

 

 

 

总结：

get方式与post方式的区别：

get:1.安全性差。

    2.通过网址传递数据

    3.容量小

    4.有缓存（get是获取数据）

    5.碰到汉子需要编码

post:1.安全性相对较好

     2.http(请求头)

     3.容量大（一帮2G）

     4.无缓存（post是提交数据，向服务器传递信息）

     5.无需编码