原生Javascript 封裝 ajax ----五部曲

阿新 • • 發佈：2019-02-20

/*原生js ajax begin*/
//ajax get五部曲
function ajax_get(url,data){
    // 非同步物件
    var ajax=new new XMLHttpRequest();

    //url方法
    //如果是get傳送資料，傳送的格式為xxx.php?name=jack&age=18
    //so這裡需要拼接url
    if(data){
        //如果有值 需要拼接字串
        url+='?';
        url+=data;
    }
    ajax.open("get", url);

    //傳送
    ajax.send();
    //註冊事件 

    ajax.onreadystatechange=function(){
        //在事件中獲取資料並修改介面顯示
        if(ajax.readyState==4&&ajax.status==200){
            console.log(ajax.responseText);
        }
    }
}
//ajax post五部曲
function ajax_post(url,data){
    var ajax=new new XMLHttpRequest();

    ajax.open('post', url);
    ajax.setRequestHeader("Content-type" 
, "application/x-www-form-urlencoded");
    if (data) {
        ajax.send(data);
    }else {
        ajax.send();
    }

    ajax.onreadystatechange=function(){
        if (ajax.readyState==4&&ajax.status==200) {
            console.log(ajax.responseText);
        }
    }
}

//method --post or get 

//url  --請求地址
//data --傳資料給伺服器
//callback --成功回撥函式
//eg:ajax_tool("xx.php","name=nihao","get",function(a){console.log(data)});

function ajax_tool(url,data,method,callback){
    var ajax=new new XMLHttpRequest();

    //get 跟post 需要分別寫不同的程式碼
    if(method=='get'){
        if(data){
            url+='?';
            url+=data;
        }else {

        }
        ajax.open(method, url);
        ajax.send();
    }else {
        ajax.open(method,url);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        if (data) {
            ajax.send(data);
        }else {
            ajax.send();
        }
    }

    ajax.onreadystatechange=function(){
        if (ajax.readyState==4&&ajax.status==200) {
            callback(ajax.responseText);
        }
    }
}
//升級版
//eg:ajax_tool1({method:"get",success:function(data){console.log(data);},data:undefined,url:"xx.php"})
function ajax_tool1(option){
    var ajax=new XMLHttpRequest();

    //get 跟post 需要分別寫不同的程式碼
    if(option.method=='get'){
        if(option.data){
            option.url+='?';
            option.url+=option.data;
        }else {

        }
        ajax.open(option.method, option.url);
        ajax.send();
    }else {
        ajax.open(option.method,option.url);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        if (option.data) {
            ajax.send(option.data);
        }else {
            ajax.send();
        }
    }

    ajax.onreadystatechange=function(){
        if (ajax.readyState==4&&ajax.status==200) {
            option.success(ajax.responseText);
        }
    }
}


/*原生js ajax end*/

//jq 獲取資料
//method --post or get
//url  --請求地址
//datat --資料型別
//callback --成功回撥函式
function jqData(method, url, datat, callback) {
    $.ajax({
        type: method,
        url: url,
        dataType: datat,
        success: callback,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });
}

原生Javascript 封裝 ajax ----五部曲

/*原生js ajax begin*/ //ajax get五部曲 function ajax_get(url,data){ // 非同步物件 var ajax=new new XMLHttpRequest(); //url方法

原生JavaScript封裝的ajax方法示例

眾所周知，框架之間會有衝突，這是源生js就起到作用了，下面介紹一種源生js封裝的ajax請求。 function ajax(options) { options = options || {}; options.type = (options.type || "GET").toU

JavaScript封裝Ajax工具函數及jQuery中的ajax

form syn oca ica 接口 || 表單元素 ear 數據結構封裝ajax工具函數 /** * ITCAST WEB * Created by zhousg on 2016/5/24. */ /* * 1. 請求的類型

原生JS封裝Ajax

tex urlencode new text repl ons xmlhttp tolower 字符 function json2url(json){ 　　//json參數轉字符串　　json.t=‘‘+Math.random(); 　　json.t=json.t.rep

原生Js封裝ajax方法

() www toupper -type get data function form encodeuri // ajax封裝function ajax(options) { /** * 傳入方式默認為對象 * */ options = opti

原生JavaScript寫AJAX

php javascript jscript 前端JavaScript:function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XMLHttpReques

原生javaScript完成Ajax請求

-i sof end 創建 request 原因失敗 .get ... 使用原生javaScript完成Ajax請求，首先應該創建一個對象XMLHttprequest，考慮到兼容低版本IE瀏覽器，使用ActiveXObject對象，代碼入下： var request;

原生JS封裝ajax以及request

一、封裝原生的xhr為ajax類 xhr以及用法見之前的文章 1、根據url確定請求的頭部以及別的資訊。 var _headerConfig = {}; if(url.indexOf('getcaptcha') !== -1) { _

CentOS7環境部署kubenetes1.12版本五部曲之四：安裝dashboard

本文是《CentOS7環境部署kubenetes1.12版本五部曲》系列的第四篇，前面的實站已經搭建了kubernetes1.12叢集，操作都是在控制檯用kubectl命令來完成的，今天咱們一起將WEB管理頁面部署上去；前提本次實戰需要科學上網，才能kube

CentOS7環境部署kubenetes1.12版本五部曲之三：node節點加入

本文是《CentOS7環境部署kubenetes1.12版本五部曲》系列的第三篇，上篇文章建立了kubernetes環境的master節點，本章的目標是在kubernetes環境加入node節點，並在上面部署Pod和Service進行驗證；準備node節點機器

CentOS7環境部署kubenetes1.12版本五部曲之五：安裝kubectl

本文是《CentOS7環境部署kubenetes1.12版本五部曲》系列的終篇，前面章節我們已搭建好了整個kubernetes環境，本文的目標是在任意一臺CentOS7機器上安裝kubectl，然後通過此kubectl對kubernetes環境做操作；前提本

JavaScript封裝AJAX

function AJAX(type, url, datetype, data, suc) { $.ajax({ type: type, url: url, data: data, dateType: datetype,

原生javascript實現ajax 傳送post請求

var postData = { "name1": "value1", "name2": "value2"}; postData = (function(obj){ // 轉成po

首次探祕！雙11奇蹟背後的大資料力量，十年發展五部曲

使用原生JavaScript實現AJAX、JSONP

一、AJAX AJAX的核心是XMLHttpRequest。一個完整的AJAX請求一般包括以下步驟：例項化XMLHttpRequest物件連線伺服器傳送請求接收響應資料我將AJAX請求封裝成ajax()方法，它接受一個配置物件params。 func

原生JavaScript實現ajax非同步請求程式碼

jQuery封裝了JavaScript的一些常用方法，而jQuery中的$ajax（），$get（），$post（）是比較常用的方法，也是大家最熟悉，最常用的，但是在面試時，通常面試官，會要求你手寫原生ajax非同步請求的程式碼，此時即便你的jquery學的再好，也是無濟於

原生JavaScript的ajax方法——請求資料

1、使用nodejs配置本地伺服器 window.function () { getData() } 2、在瀏覽器執行程式，併發送資料請求 3、在路由中攔截請求，呼叫控制器中相應方法getStuData，返回資料 r

原生JavaScript之ajax總結

什麼都不說，直接上兩段程式碼，解開ajax的面紗，來看看原生js的ajax是如何工作的。 //ajax傳送GET請求 function ajaxGet(url,callback){ //第一步：建立XMLHttpRequest物件 var request = new XMLHttpReq

圖解如何將Ubuntu上的Qt程式交叉編譯出可在ARM平臺執行的程式（五部曲）

圖解如何將Ubuntu上的Qt程式交叉編譯出可在ARM平臺執行的程式（五部曲） (原創作品，轉載時請註明出處，商業用途前應徵得作者同意) 作者： devinoy（百度使用者）日期：2012-10-16 版本：V1.00 Ubuntu（以ubuntu12.04為例，

如何用原生JS封裝Ajax

編寫Ajax的四個步驟： 1、建立Ajax物件； ActiveXObject("Microsoft.XMLHTTP") XMLHttpRequest()//IE7+, Firefox, Chrome, Opera, Safari 2、傳送請求（準備資料，真正傳送）； s

原生Javascript 封裝 ajax ----五部曲

相關推薦