zoukankan      html  css  js  c++  java
  • 原生Ajax写法

    一. Ajax 是什么?

    • 全称Asynchronous JavaScript and XML
    • 异步的 JavaScript 和 XML;
    • 可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容;
    • 能够实现局部刷新,大大降低了资源的浪费;
    • 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行;
    • 是一门用于创建快速动态网页的技术;
    • 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页;

    二. Ajax工作原理

    简单来说就是 通过XmlHttpRequest对象向服务器发异步请求,从服务器获得数据,然后用 javascript 来操作DOM更新页面的技术。

    三. Ajax的使用

    Ajax的使用分为四部分:
    1.) 创建一个XMLHttpRequest对象;
    1. 兼容IE低版本浏览器(ie5-ie6);
    2. 使用if,else或者try,catch;
    2.) 配置请求信息;
    1. 请求的方式;
    2. 请求文件的路径;
    3. 是否异步,默认为true;
    3.)发送请求;
    1. get与post的区别;
    2. get与post的使用场景;
    4.) 监听状态变化,执行相应回调函数;
    1. http状态码都有哪些?
    2. 不同状态码代表的含义?

    3.1 创建XMLHttpRequest对象

    目前所有的现代浏览器(包括IE7+、Firefox、Chrome、Safari 以及 Opera)均内建有 XMLHttpRequest 对象,写法如下:

    var xhr = new XMLHttpRequest();

    低版本的 IE 浏览器 (主要指 IE5 和 IE6)没有XMLHttpRequest 对象,使用 ActiveXObject 对象,写法如下:

    var xhr =new ActiveXObject("Microsoft.XMLHTTP");

    举个兼容性写法的例子:

    为了兼容所有的现代浏览器,包括 IE5 和 IE6,需要判断浏览器是否支持 XMLHttpRequest 对象。如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :

    var xhr;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xhr = new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    
    

    3.2 向服务器发送请求

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

    方法参数配置
    open(method, url, async) method:请求的类型, GET 或 POST;url:文件在服务器上的位置;async:布尔值,判断是否异步,true为异步(默认)或 false为同步;
    send(string) string:参数,get不传参,仅用于 POST 请求

    注意:

    • 不推荐使用 async=false,但是对于一些小型的请求,也是可以的。
    • 请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。
    • 当你使用 async=false 时,后面不要写 onreadystatechange 函数 - 直接把代码放到 send() 语句后面即可:
      xhr.open("GET","/try/ajax/ajax_demo.txt",false);
      xhr.send();
      document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
      
      

    举个栗子:

    // 使用get方法请求服务器上的1.txt文件
    xhr.open("GET","1.txt",true);
    xhr.send();
    

    3.2.2 GET与POST的区别

    • 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用;
    • GET存在缓存问题,使用GET方法一定要记得清除缓存,不然请求的数据不是最新的;
    • GET不安全,明文传输,POST更安全;
    • GET适用于小文件,POST没有数量限制;
    • GET使用send方法时不传参,POST必须传参;

    3.2.3 只能使用 POST 请求的情况

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    3.2.4 怎么使用POST发送数据?

    它其实就类似于 HTML 表单那样 POST 数据,我们需要使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中写要发送的数据:
    向请求添加 HTTP 头方法如下:

    xhr.setRequestHeader(header,value);
    // header: 规定头的名称;
    // value: 规定头的值;
    
    xhr.open("POST","/try/ajax/demo_post2.php",true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send("fname=Zhou&lname=minghang");
    

    3.4 监听事件变化

    • 如果是同步请求的话,不需要写监听事件变化函数;
    • 一般默认都是异步请求,才写监听函数;

    异步请求时的监听事件变化函数如下:

        xhr.onreadystatechange=function()
    {
        if (xhr.readyState==4 && xhr.status==200){
            document.getElementById("myDiv").innerHTML = xhr.responseText;
        }else{
             console.log('失败了');
        }
    }
    

    3.4.2 onreadystatechange 事件

    • 当请求被发送到服务器时,我们需要执行一些基于响应的任务。
    • 每当 readyState 改变时,就会触发 onreadystatechange 事件。
    • readyState 属性存有 XMLHttpRequest 的状态信息。

    3.4.2.1 onreadystatechange属性的作用?

    存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

    3.4.2.2 readyState属性的作用?都有哪些状态?

    • 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
      • 0: 请求未初始化
      • 1: 服务器连接已建立
      • 2: 请求已接收
      • 3: 请求处理中
      • 4: 请求已完成,且响应已就绪

    一般常见的状态码有:

    • 200:"OK, 成功"
    • 404: "页面找不到"

    状态码具体含义:

    • 200:服务器响应正常。
    • 304:该资源在上次请求之后没有任何修改(这通常用于浏览器的缓存机制,使用GET请求时尤其需要注意)。
    • 400:无法找到请求的资源。
    • 401:访问资源的权限不够。
    • 403:没有权限访问资源。
    • 404:需要访问的资源不存在。
    • 405:需要访问的资源被禁止。
    • 407:访问的资源需要代理身份验证。
    • 414:请求的URL太长。
    • 500:服务器内部错误。

    四. 怎么处理服务器反馈的数据?

    如果我们想获得服务器上的数据,并进行相应的操作,这就要用到XMLHttpRequest 对象的 responseTextresponseXML 属性。

    • responseText属性:
      • 获得字符串形式的响应数据;
      • 如果来自服务器的响应并非 XML,请使用 responseText 属性;
      • responseText 属性返回字符串 形式的响应;
      document.getElementById("myDiv").innerHTML=xhr.responseText;
      
    • responseXML属性:
      • 获得 XML 形式的响应数据。
      • 如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:
      xmlDoc=xmlhttp.responseXML;
      txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
      {
          txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      

    document.getElementById("myDiv").innerHTML=txt;




    原文链接:https://www.jianshu.com/p/2be2e4f1fc8e

  • 相关阅读:
    web安全培训笔记
    《virtualbox完全学习手册》
    vim多标签,多窗口
    lnmp.org一键安装包
    git基本命令,Git的skil-map,git配置http/https/socks5代理,,,,,,,,,,,,,,,,,,,,,,
    大数据
    chinacloud大数据新闻
    CentOS6.5/7安装配置Samba
    java项目
    学习Java Web开发
  • 原文地址:https://www.cnblogs.com/fsg6/p/13154577.html
Copyright © 2011-2022 走看看