原生ajax方法封装

/**
 * @function ajax request
 * @fields ajaxName:请求名称,method:请求方法,url:接口地址,async:是否异步请求,withCredentials:是否支持跨域发送cookie,params:post请求参数
 * @param data:{"ajaxName":"ajaxNameString","method":"GET/POST","url":"","async":true/false,"withCredentials":true/false,"params":{}}
 * @result ajaxName.responseText
 */
function ajaxRequest(data, callback) {
    var ajax = data.ajaxName;
    // 新建请求
    ajax = new XMLHttpRequest();
    // 打开请求
    ajax.open(data.method, data.url, data.async);
    // 是否支持跨域发送cookie
    ajax.withCredentials = data.withCredentials;
    // 如果是POST请求则设置Header
    if (data.method == ‘POST‘) {
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    }
    // 发送请求
    ajax.send(data.params ? data.params : ‘‘);
    // 注册事件
    ajax.onreadystatechange = function () {
        callback(ajax);
    }
}

调用方法:

ajaxRequest({
    "ajaxName": ajaxName,
    "method": "POST",
    "url": "http://xxx.xxx.xxx/",
    "async": true,
    "withCredentials": true,
    "params": params
}, function callback(ajax) {
    console.log(ajax.responseText);
})

原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/8659463.html

时间: 2024-08-12 23:16:46

原生ajax方法封装的相关文章

原生ajax 方法封装

封装的技巧:将公共的代码提取出来,将可能会变化的代码,通过参数传递; 例如:请求服务器的方式.服务器地址.携带的参数.以及期望什么类型的数据,都得通过参数传递: 下面是封装的ajax操作的代码: 原文地址:https://www.cnblogs.com/lxc-bky/p/9568217.html

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

js原生Ajax的封装与使用

一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest(); }, createIEXHR: function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, createErrorXHR: function () { alert("Your browser does n

基于jquery的ajax方法封装

在实际的项目里,ajax的应用频率很高,所以尽管jquery或者其他的一些类似的js库做了非常不错的封装,仍然有进一步封装简化的空间和必要 举一个例子,很久很久以前,我的ajax是这么写的: $.ajax({ url: 'www.baidu.com/getInfo', type: 'POST', data: { name: 'jack', age: 18 }, dataType: 'json', success: function(resp){ // callback }, error: fun

ajax方法封装

/** * 公用方法:使用AJAX获取数据 * @param {[type]} param [参数] * @param {[type]} url [路径] * @param {[type]} callBack [成功的回调函数] */function ajax(param, url, callBack) { $.ajax({ type: "GET", url: serverUrl + url, data: $.param(param, true), success: callBack,

原生AJAX请求教程

ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. XMLHttpRequest 对象 浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 所有现代浏览器(IE7+.Firefox.C

javascript实现原生ajax的几种方法

自从js有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何办呢?下面和大家分享几种利用javascript实现原生ajax的方法. 首先实现ajax之前必须要创建一个 XMLHttpRequest 对象的.如果不支持创建该对象的浏览器,则需要创建 ActiveXObject,具体方法如下: var xmlHttp; function createxmlHttpReques

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1.原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新 1.隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了 2.Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转 原生Ajax写法---注意ajax的缩写 3.服务器放回了xml数据格式 解析过程还是很麻烦的,所以这种数据格式很少用了. 4.

封装一个类似jquery的ajax方法

//封装一个类似jquery的ajax方法,当传入参数,就可以发送ajax请求 //参数格式如下{ // type:"get"/"post", // dataType:"json"/"jsonp", // url:"地址", // data:{key:value} // success:function(){ // } // } //还需要一个跨域方法,可以访问远程服务器的数据 function myAja