zoukankan      html  css  js  c++  java
  • javascript实现原生ajax

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了。但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件。但又要使用到ajax这种功能该如何办呢?下面和大家分享javascript实现原生ajax的方法。 

    实现ajax之前必须要创建一个 XMLHttpRequest 对象。如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: 

    var xmlHttp; 
    function createxmlHttpRequest() { 
    if (window.ActiveXObject) { 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } else if (window.XMLHttpRequest) { 
    xmlHttp=new XMLHttpRequest(); 
    }

    (1)下面使用上面创建的xmlHttp实现最简单的ajax get请求:

    function doGet(url){ 
    // 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
    createxmlHttpRequest(); 
    xmlHttp.open("GET",url); 
    xmlHttp.send(null); 
    xmlHttp.onreadystatechange = function() { 
    if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
    alert('success'); 
    } else { 
    alert('fail'); 
    } 
    } 
    } 

    (2)使用上面创建的xmlHttp实现最简单的ajax post请求:

    function doPost(url,data){ 
    // 注意在传参数值的时候最好使用encodeURI处理一下,以防出现乱码 
    createxmlHttpRequest(); 
    xmlHttp.open("POST",url); 
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    xmlHttp.send(data); 
    xmlHttp.onreadystatechange = function() { 
    if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) { 
    alert('success'); 
    } else { 
    alert('fail'); 
    } 
    } 
    } 
  • 相关阅读:
    dva实用的学习笔记
    上传图片到七牛云
    Lodash学习笔记
    Ant Design Pro 脚手架+umiJS 实践总结
    SVN的安装和使用手册
    判断数据类型的5种方法
    常见react面试题汇总(适合中级前端)
    Es6 类class的关键 super、static、constructor、new.target
    ES2019 新特性简介
    通用正则实战200
  • 原文地址:https://www.cnblogs.com/blibli/p/7573522.html
Copyright © 2011-2022 走看看