Ajax基础

最新推荐文章于 2023-10-12 20:10:21 发布

想上天的蓝胖子

最新推荐文章于 2023-10-12 20:10:21 发布

阅读量421

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/ll_0801xyz/article/details/75151808

版权

一、基础

ajax能且仅能从服务器上读取文件信息
服务器：网页浏览过程分析
Ajax：无刷新数据读取
常用的地方：用户注册和在线聊天室，分为同步和异步

二、使用

基础：请求并显示静态TXT文件
字符集编码格式：utf-8编码。
缓存、阻止缓存，利用url里的’abc.txt?t=’+newDate().getTime() (毫秒数)
动态数据：请求JS（或json）文件
在服务器上读到的东西全部是以文本（string）的方式，因此无法拿到数组或者json，需要eval
eval(str)的使用：将字符串转换成js代码（函数，计算等）
服务器上更多的是放的json或由json组成的数组

三、http请求方法

1、GET：用于获取数据（如：浏览贴子）：把数据放在url（网址）里来提交
2、POST：用于上传数据（如：用户注册）：把数据放在不是url的地方提交
区别：
get在url里传送数据：安全性低、容量小
post安全性一般、容量几乎无限
get便于分享（商品地址和url有关），适合获取，且会缓存
post更适合上传（图片等）

http请求方法http://blog.sina.com.cn/s/blog_8211f08a0102ve2a.html

四、封装一个Ajax

1、创建Ajax对象：

全局变量和全局函数都是window的属性和方法，只是前面的window.被省略了，但是他们未定义的时候出错是不同的（用一个不存在的变量会出错，而用一个不存在的属性只是未定义），因此可以用window.XX的方式做判断

2、与服务器连接：open(方法,文件名,异步传输)

方法：GET/POST
文件名：你的文件名
同步和异步：false/true
事件一件一件进行就是同步，多件事一起进行就是异步

3、发送请求：send()

4、接收返回值：

onreadystatechange：与服务器发生数据传输时
readyState属性：请求状态
0、（未初始化）还没有调用open()方法
1、（载入）已调用send()方法，正在发送请求
2、（载入完成）send()方法完成，已收到全部相应内容
3、（解析）正在解析相应内容
4、（完成）相应内容解析完成，可以在客户端调用了
status属性：是否成功（200成功，常见失败404）
responseText属性：返回的数据

五、JS封装

function ajax(url,fnSucc,fnFaild){  
   //参数：1、连接服务器的地址；2、成功时函数；3、失败时函数  
   //1、创建Ajax对象  
   var oAjax = null;  
   if(window.XMLHttpRequest){  
      oAjax = new XMLHttpRequest();    
   }else{  
      oAjax = new ActiveXObjext("Microsoft.XMLHTTP");  
   }  
   //2、连接服务器  
   oAjax.open('GET',url,true);  //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();  
         }
      }
   }
}

IE低版本使用ActiveXObject,和W3C标准不一样

六、状态码readyState

0:未初始化，还没调用send()方法；
1：载入，已调用send()方法，正在发送请求；
2：载入完成，send()方法执行完成，已经接收到全部响应内容；
3：交互，正在解析响应内容；
4：完成，响应内容解析完成，可以在客户端调用了

七、status

2xx:成功处理请求；
3xx:需要重定向，浏览器直接跳转；
4xx:客户端请求错误；
5xx:服务器端错误；

八、 jQ封装

$.ajax({
    method: 'post',//get
    url: '',
    contentType: 'application/json',
    data:'',
    success: function (data) {
        
    },
    error:function(){

    }
});

九、优点：

1.无刷新更新数据：减少用户等待时间
2.异步与服务器通信：不需要打断用户的操作，具有更加迅速的响应能力
3.前端和后端负载平衡：减轻服务器和带宽的负担
4.基于标准被广泛支持：不需要下载浏览器插件或者小程序
5.界面与应用分离：有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、

十、缺点：

1.AJAX干掉了Back和History功能：动态更新的页面，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面
解决方法：使用URL片断标识符来保持跟踪
2.AJAX的安全问题：
3.对搜索引擎支持较弱
4.破坏程序的异常处理机制
5.违背URL和资源定位的初衷：你在一个URL地址下面看到的和我在这个URL地址下看到的内容是不同的。
6.AJAX不能很好支持移动设备
7.客户端过大，太多客户端代码造成开发上的成本