• AJAX的问题


    1.什么是AJAX

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

     AJAX:Asynchronous Javascript And XML,异步的JS和XML。

    2002年Google在搜索引擎中提出了“Google Suggest”效果,把使用的技术命名为“AJAX”,为了避免浏览器中出现“一片惨白”影响浏览体验。

     实现原理:在客户端浏览网页内容的同时,服务器在提供最新的内容,局部更新在页面中——无提交无刷新的页面内容局部更新技术

     AJAX应用涉及到的技术:HTML、CSS、JS、DOM、XML、HTTP协议等——纯前端技术,需要与Web服务器交互。

    2.浏览器发起HTTP请求的两种方式:

    (1)同步请求:地址栏、表单提交、超链接跳转、JS跳转

    (2)异步请求:使用XHR对象

    3.使用XHR发起HTTP请求的步骤

     1 创建xhr对象

      var xhr = new XMLHttpRequest();

     2 连接到服务器

       xhr.open('GET', 'x.php', true);

      3 发送请求消息

       xhr.send( null / 'k=v&k=v' );

      4 监听xhr的状态改变事件

      xhr.onreadystatechange = function(){

      if(xhr.readyState===4){ //响应消息接收完成

      if(xhr.status===200){ //响应完成且成功

      }else{ //响应完成但有问题

       }}}

    4.XHR对象成员属性:

    1. readyState:0    就绪状态,随着请求-响应的进行自动改变
    2. response:""
    3. responseText:""    响应消息主体,readyState变为3才有值
    4. responseType:""
    5. responseURL:""
    6. responseXML:null  响应消息主体,readyState变为3才有值
    7. status:0     响应状态码readyState变为2有值
    8. statusText:""    原因短句,readyState变为2有值
    9. timeout:0
    10. DONE:4    readyState可取值之一,响应消息接收完成
    11. HEADERS_RECEIVED:2    readyState可取值之一,开始接收响应消息头部
    12. LOADING:3    readyState可取值之一,开始加载响应消息主体
    13. OPENED:1    readyState可取值之一,XHR已经打开到服务器的连接
    14. UNSENT:0     readyState可取值之一,请求消息尚未发送

    5.XHR对象成员方法:

    1. getAllResponseHeaders:getAllResponseHeaders()
    2. getResponseHeader:getResponseHeader()   读取响应头部
    3. setRequestHeader:setRequestHeader()    设置请求头
    4. open:open()    打开到服务器的连接
    5. send:send()    发送请求消息

     6.使用Microsogt浏览器IE(6以下):

    Microsogt浏览器IE(6以下)使用MSXML解析器处理XML,如果编写的AJAX应用程序并不简单,根据IE中安装的JacaScript技术的版本不同,MSXML实际上有两种不同的版本,因此必须对这两种情况分别编写代码,如:

    var xml=false;
    try{
      xml=new ActiveXObject("Msxml2.XMLHTTP");      
    }catch(e){
      try{
      xml=new ActiveXObject("Microsoft.XMLHTTP");  
     }  catch(e2){
        xml=false;  
      }
    }

    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");



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

    这两行代码基本上就是尝试使用一个版本的MSXML创建对象,如果失败则使用另一个版本创建该对象。

    或者官方文档

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
  • 相关阅读:
    IE6不支持hover赋予css样式的解决方法 如div:hover li:hover支持
    导航条
    check的css样式
    css3网站
    时间轴滚动充盈
    html5网站
    图片查看插件
    响应式列表中控制图片高度一致js
    json数组按xxx属性值排序 升序
    H5响应式方案
  • 原文地址:https://www.cnblogs.com/xin9984/p/6103109.html
Copyright © 2020-2023  润新知