js学习之AJAX

AJAX:让js读取服务器的数据

使用Ajax

基础:请求并显示静态TXT文件

注意字符集编码的一致

缓存和阻止缓存的问题(这只是一种方法):‘xxx.txt?t=’Data().getTime()

AJAX读取的任何东西都是以字符串的形式存在
HTTP请求的方法:

get方式,将内容放到url里,跟随uri一起通过网址传递

容量小,因为网址限制,不适合传递大数据

安全性非常差

有缓存

适合用来回来获取数据(如浏览帖子)

post方式,通过http的content,不通过网址

容量大(2G)

安全性相对好一点,真正安全走(HTTPS)

没有缓存

用于上传数据(如用户注册)

AJAX:(类比打电话)

1、创建AJAX对象   手机    XMLHttpRequest()和ActiveXObject(“Microsoft.XMLHTTP”)(IE下用到)

2、连接到服务器   拨号    open

3、发送请求       说      send

4、接受返回值     听      oAjax.onreadystatechange  oAjax.readyState

oAjax.readyState==0/1/2/3/4   浏览器和服务器进行到哪一步了

0 未初始化,还没有调用open()方法

1 (载入)已经调用open()方法,正在发送请求

2 (载入完成)send()方法完成,已经收到全部响应

3 (解析)正在解析响应内容

4 (完成)响应内容解析完成,可以在客户端调用了
statue属性,请求结果,判断成功还是失败 一般成功200,失败not found404

responseText  返回文件内容
同步 事情一件一件来 false

异步 多个事情可以一起来(ajax天生就是用来进行异步操作的)true
AJAX数据类型

中文一定要用UTF-8

XML和json数据类型,同等数据XML要大很多,已经淘汰了几乎

一定要统一字符集一般UTF-8

用js实现AJAX的代码

//这里url未对应的文件名,fnSucc和fnFaild为自己编写的的函数

function ajax(url, fnSucc, fnFaild)

{

   //1.创建Ajax对象

   if(window.XMLHttpRequest)

   {

      var oAjax=new XMLHttpRequest();

   }

   else

   {

      //兼容IE

      var oAjax=new ActiveXObject(“Microsoft.XMLHTTP”);

   }

   

   //2.连接服务器(打开和服务器的连接)

   oAjax.open(‘GET’, url, true);

   

   

   //3.发送

   oAjax.send();

   

   //4.接收

   oAjax.onreadystatechange=function ()

   {

      if(oAjax.readyState==4)

      {

         if(oAjax.status==200)

         {

            //alert(‘成功了:’+oAjax.responseText);

            fnSucc(oAjax.responseText);

         }

         else

         {

            //alert(‘失败了’);

            if(fnFaild)

            {

               fnFaild();

            }

         }

      }

   };

}

欢迎分享本文,转载请保留出处:前端ABC » js学习之AJAX

赞 (1)
分享到:更多 ()

发表评论 0