zoukankan      html  css  js  c++  java
  • Ajax

    1、Ajax(asynchronous javascript and xml)

        是一种改善用户体验度的技术

        实质上是利用浏览器内置的对象(ajax对象,类型是XMLHttpRequest)向服务器发送异步(ajax对象向服务器发送请求时,不会打断用户的其他操作)的请求,服务器将处理的数据返回给ajax对象,该对象将数据在页面局部更新,通过ajax向服务器发送请求

        1)用ajax好处

          以前的是通过浏览器向服务器发送请求

              * 用户体验度差

              * 数据量传输比较大,浏览器向服务器发送请求,服务器返回回来的是一个新的页面,原来的页面被销毁,信息会丢失,而ajax技术不会销毁该页面(局部刷新)

    2、如何获取ajax对象

        可以通过BOM、DOM(低版本的IE浏览器类型是ActiveXObject)

         1)判断哪种类型的浏览器

    var xhr=null;
    if(window.XMLHttpRequest){
    xhr=new XMLHttpRequest();
    }else{
    xhr=new ActiveXObject('Microsoft.XMLHttp');
    }

    3、XMLHttpRequest相关属性

        * onreadystatechange:给ajax对象注册一个监听器(服务器返回过来的信息的后续工作在监听器里做,局部刷新)

        * readyState:ajax对象与服务器的通讯状态(0(未初始化)/1/2/3/4(服务器已经响应结束处理结束))

        * responseText:服务器返回的是文本类型的数据

        * status:服务器响应的状态码(200/404(地址有错)/500(代码问题)...)

    4、如何使用ajax对象向服务器发请求

        1)get请求

          *1、获取ajax对象

          *2、初始化

    xhr.open("get","checkUsername.do?username=zs",true/false);  //true表示异步(常用),false表示同步(ajax对象向服务器发送请求,服务器响应回来之前,页面会被锁死,用户做不了其他操作)

          *3、给ajax对象注册一个监听器(状态发生改变才会执行监听器中的代码块,最后才会被执行)

    xhr.onreadystatechange=function(){};

          *4、发送请求

    xhr.send(null);

        2)post请求

          *1、获取ajax对象

          *2、初始化(与get不同)

    xhr.open("post","checkUsername.do",true/false);
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //post请求需要设置消息头(key-value),否则ajax对象传不过去

          *3、给ajax对象注册一个监听器

    xhr.onreadystatechange=function(){};

          *4、发送请求

    xhr.send("username=zs");

        注:在以下情况下请使用post请求

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

          b. 向服务器发送大量的数据(post请求没有数据量的限制)

          c. 发送包含位置字符的用户输入时,post比get更稳定也更可靠

    5、如果使用ajax对象向服务器发送请求,并且采用的get请求类型,那么IE浏览器有以下问题:

        a. 中文乱码

            导致原因:chrome与firefox浏览器采用的是utf-8格式处理中文,而IE采用的是gbk,服务器解码格式统一是 utf-8,因此IE浏览器会有中文乱码问题

            解决方案:用 encodeURI(uri) 方法

                将uri中的中文采用utf-8的格式处理

    var uri="checkUsername.do?username="+username+"&v="+new Date().getTime();
    xhr.open("get",encodeURI(uri),true); //初始化,encodeURI(uri)处理uri时采用utf-8格式输出

        b. 缓存问题

          如果每次发送请求的uri都未发生改变,那么浏览器不会真正的向服务器发请求,而是将缓存的数据返回给了浏览器

           解决方案:

            a. 采用post请求

            b. 在uri地址后添加随机参数值/时间戳(将请求地址换成动态的,时间戳),如下:

    xhr.open("get","checkUsername.do?username="+username+"&v="+new Date().getTime(),true);  //初始化
  • 相关阅读:
    ListView Item 点击展开隐藏问题
    01背包基础 (杭电2602)
    实现一个简单的语音聊天室(多人语音聊天系统)
    Tomcat全攻略
    Linux pipe函数
    从网页抓取数据的一般方法
    华为的面试经历
    微软2014校园招聘笔试试题
    C++ 虚函数表解析
    unity3d 改动gui label颜色,定义颜色需除以256
  • 原文地址:https://www.cnblogs.com/xslzwm/p/9590045.html
Copyright © 2011-2022 走看看