zoukankan      html  css  js  c++  java
  • Ajax

    ajax是异步的JavaScript和XML。通过后台与服务器少量的数据交换,ajax可以实现网页的异步更新。这意味着在不刷新整个页面的情况下,可以对网页的局部进行更新。

    ajax原理 通过XMLHttpReuest对象向服务器发出异步请求,从服务器获取数据,然后用JavaScript操作dom来更新页面。

    同步 脚本会停留并等待服务器回复然后再继续
    异步 脚本允许继续其进程并处理可能的回复

    交互流程
    1,创建XMLHttpRequest对象
    2,open 打开url通道,设置异步传输
    3,send 发送数据到服务器
    4,服务器接受数据并处理,处理完成后返回结果
    4,客户端接收服务器返回

    ajax创建流程

     1 function creatXmlHttp(){
     2         var xhr = null;
     3         if(window.XMLHttpRequest){
     4             xhr = new window.XMLHttpRequest();
     5         }else{
     6             try{
     7                 xhr = new window.ActiveXObject('Msxml2.XMLHTTP');
     8             }catch(e){
     9                 try{
    10                     xhr = new window.ActiveXObject('Mircosoft.XMLHTTP');
    11                 }catch(e){
    12                     alert('您的浏览器不支持ajax!');
    13                 }
    14             }
    15         }
    16         return xhr;
    17     }
    18 
    19     function testCreatXML(){
    20         var xhr = creatXmlHttp();
    21         xhr.open('get',url,true);
    22         xhr.setRequestHeader('content-Type','application/jpson');
    23         xhr.onreadystatechange = function(){
    24             if(xhr.readyState == 4 && xhr.status == 200){
    25                 //
    26             }
    27         }
    28         xhr.send();
    29     }


    ajax ready对象状态值
    0 对象建立,未初始化
    1 初始化,未调用send
    2 发动数据
    3 数据传输中,并接收了部分数据
    4 数据接收完成

    ajax优缺点
    优点
    1,无刷新更新数据
    2,异步与服务器通信
    3,前后端负载平衡
    4,基准被广泛支持
    5,界面与应用分离
    缺点
    ajax干掉了back和history功能,对浏览器机制的破坏
    ajax安全问题
    对搜索引擎支持弱
    破坏程序的异常机制
    违背URL和资源定位的初衷
    AJAX不能很好支持移动设备
    客户端过肥,太多客户端代码造成开发上的成本

    同源策略
    同源是指:同协议,同端口,同域名

    跨域的解决办法
    1,jpsonp
    2,动态创建script标签
    3,document.domain+iframe
    4,HTML5 postMessage
        otherWindow.postMessage(message, targetOrigin);

  • 相关阅读:
    JS中级二
    JS中级一
    JS入门八
    JS入门七
    JS入门六
    JS入门五
    JS入门四
    JS入门三
    JS入门二
    JS入门1
  • 原文地址:https://www.cnblogs.com/yll134/p/6226937.html
Copyright © 2011-2022 走看看