• 对Ajax的原理的理解和使用


    1.什么是ajax?

      AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

      AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

      AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。

      通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

      传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

    2.如何使用?

      1、创建XMLHttpRequest对象

        var xmlhttp = new XMLHttpRequest()

        (有兼容性问题)

        为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

     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");
     }

      2、向服务器发送请求

      我们使用 XMLHttpRequest 对象的 open() 和 send() 方法:

      xmlhttp.open(
        method:请求的类型;GET 或 POST,
        url:文件在服务器上的位置,
        async:true(异步)或 false(同步)
      );
      xmlhttp.send(); // 仅用于发送post请求
      如果是post请求,需要发送header信息
      xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
     3响应
      

      使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性来获得响应的内容。

    
    
    属性描述
    responseText 获得字符串形式的响应数据。
    responseXML 获得 XML 形式的响应数据。

     4、
    onreadystatechange 事件
      
    属性描述
    onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
    readyState

    存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

    • 0: 请求未初始化
    • 1: 服务器连接已建立
    • 2: 请求已接收
    • 3: 请求处理中
    • 4: 请求已完成,且响应已就绪
    status

    200: "OK"

    404: 未找到页面

    
    

      当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

    
    
      xmlhttp.onreadystatechange=function()
        {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
          {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
          }
        }
     


  • 相关阅读:
    JS魔法堂:jQuery.Deferred(jQuery1.5-2.1)源码剖析
    JS魔法堂:ASI(自动分号插入机制)和前置分号
    JS魔法堂:初探传说中的setImmediate函数
    JS魔法堂:LINK元素深入详解
    JS魔法堂:IMG元素加载行为详解
    JS魔法堂:函数节流(throttle)与函数去抖(debounce)
    JS魔法堂:从void 0 === undefined说起
    JS魔法堂:jsDeferred源码剖析
    前端翻译:Promises/A+规范
    JS魔法堂:剖析源码理解Promises/A规范
  • 原文地址:https://www.cnblogs.com/ympjsc/p/11851494.html
Copyright © 2020-2023  润新知