使用JavaScript 定义自己的ajax函数

由于用原生js的方式发起的网络请求,都是以查询字符串的形式,提交给服务器的,用户以对象的形式提交参数的话会比较方便,所以需要把用户传递过来的参数对象进行处理,定义resolveData的函数,设置形参接收参数,遍历里面的对象,把键和值用=的方式进行拼接,然后把所得的值添加进空的数组即可;最后用&符号把数组的每一项进行分割,并返回;定义itheima函数,设置形参用于接收用户传递过来的配置对象参数,创建xhr对象,把传递过来的参数传递给处理参数的函数,把得到的返回值,给一个变量,由于是不同的请求,所以要进行判断,首先是GET请求,判断参数里面的method是否全等于GET,由于传递过来的参数有可能是小写,所以通过toUpperCase方法转化为大写,如果条件成立调用open方法,把对应的值填入即可,调用send函数;POST也一样,只是提交数据多了参数和POST请求需要“Content-Type”头指定请求主题的MIME类型。最后调用监听事件即可;

function resolveData(data) {
    var arr = [];
    for (var k in data) {
        var str = k + "=" + data[k];
        arr.push(str)
    }
    return arr.join("&")
}
function itheima(options) {
    var xhr = new XMLHttpRequest();
    var qs = resolveData(options.data);
    if (options.method.toUpperCase() === "GET") {
        xhr.open(options.method, options.url + "?" + qs);
        xhr.send();
    } else if(options.method.toUpperCase() === "POST"){
        xhr.open(options.method, options.url)
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        xhr.send(qs)
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var result = JSON.parse(xhr.responseText)
            options.success(result);
        }
    }
}

最后测试一下是否能成功~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试界面</title>
<script src="itheima.js"></script>
</head>
<body>
    <script>
        itheima({
            method:"GET",
            url:"http://www.liulongbin.top:3006/api/getbooks",
            data:{
                id:1
            },
            success:function(res){
                console.log(res);
            }
        });
    </script>
</body>
</html>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-11-23

ASP.NET中MVC使用AJAX调用JsonResult方法并返回自定义错误信息

一.如何用AJAX调用JsonResult方法 比如FuckController中添加有个返回JsonResult类型的方法FuckJson(): 复制代码 代码如下: <span class="kwd">public<span class="pln"> <span class="typ">JsonResult<span class="pln"> <span class=&

详解JavaScript自定义函数

一.定义方法:在Javascript中必须用function关键字 function funcName(arg1,arg2...) { statements; return "变量值"; //返回值可以根据函数的需要 } 函数名是函数自身的一个引用.此种方式创立的函数引用是独立存在的,无法删除. 1.调用函数:函数名(参数列表). 传递的参数不必与函数定义的参数个数一致,并且可以设定函数参数的默认值. function example(a,b){ var a = arguments[0

js 使用ajax设置和获取自定义header信息的方法小结

本文实例讲述了js 使用ajax设置和获取自定义header信息的方法.分享给大家供大家参考,具体如下: 1.js ajax 设置自定义header 1.1 方法一: $.ajax({ type: "POST", url: "Handler1.ashx", contentType: "application/x-www-form-urlencoded", beforeSend: function (request) { request.setRe

JavaScript函数定义方法实例详解

本文实例讲述了JavaScript函数定义方法.分享给大家供大家参考,具体如下: JavaScript 函数定义方法 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. function myFunction(a, b) { return a * b; } 分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以不以分号结束

javascript递归函数定义和用法示例分析

递归函数:是指函数直接或间接调用函数本身,则称该函数为递归函数. 这句话理解起来并不难,从概念上出发,给出以下的例子: function foo(){ console.log("函数 foo 是递归函数."); foo(); } 这个例子的 foo 函数就是一个递归函数. 当你把这个函数拿到浏览器上运行的时候,你会发现内存溢出了,为什么呢?因为这个递归函数没有停止处理或运算的出口,因此这个递归函数就演变为一个死循环. 那如何使用递归呢? 使用递归函数必须要符合两个条件: 1. 在每一次

基于JavaScript如何实现ajax调用后台定义的方法

由于ajax的独特优势,使得它在当前大量网站得到了广泛的应用,下面就介绍一下ajax如何调用后台定义的函数,虽然比较简单,不过希望能够给初学者带来一定的帮助,代码如下: 1.首先我们先创建一个antzone.aspx页面. 2.在它的cs文件中创建如下函数: public static string mytest(string first, string second) { return return first+second; } 2.html代码如下: <form id="myform

JS定义函数的几种常用方法小结

本文实例讲述了JS定义函数的几种常用方法.分享给大家供大家参考,具体如下: 在 JavaScript 语言里,函数是一种对象,所以可以说函数是 JavaScript 里的一等公民(first-class citizens). 之前我们这样定义过一个函数: function greet(greeting, name) { return `${greeting}, ${name}` } 因为在 JavaScript 里面是对象(object),所以它会有一些属性还有方法.比如 name 属性是函数的

js function定义函数的几种不错方法

js function定义函数的4种方法 1.最基本的作为一个本本分分的函数声明使用. 复制代码代码如下: 复制代码 代码如下: function func(){} 或 var func=function(){}; 2.作为一个类构造器使用: 复制代码代码如下: 复制代码 代码如下: function class(){} class.prototype={}; var item=new class(); 3.作为闭包使用: 复制代码代码如下: 复制代码 代码如下: (function(){ //

JS数据类型判断的几种常用方法

JavaScript 中常见数据类型有Number.String.Boolean.Object.Array.Json.Function.Date.RegExp.Error.undefined.Null等十几种.ES6还有新增的数据类型有Symbol.Set.Map等.在实际应用中,我们经常需要判断数据类型,现在我归纳几种方法,希望对大家有所帮助. typeof 判断(最常用) typeof 是 JS 提供的一个运算符,专门用来检测一个变量的类型 . typeof 有2种使用方式:typeof(表

关于C++中定义比较函数的三种方法小结

C++编程优与Pascal的原因之一是C++中存在STL(标准模板库).STL存在很多有用的方法. C++模板库中的许多方法都需要相关参数有序,例如Sort().显然,如果你想对一个集合进行排序,你必须要知道集合中的对象,那个在前那个在后.因此,学会如何定义比较方法是非常重要的. C++模板库的许多容器需要相关类型有序,例如set<T> 和priority_queue<T>. 这篇文章旨在告诉大家如何为一个类定义一个排序方法,以便在STL容器或者方法中使用. 作为一个C++程序员,

js定义类的几种方法(推荐)

ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类. js中的类,既是重点,也是难点,很多时候都感觉模棱两可. 首先强调一下js中很重要的3个知识点:this.prototype.constructor. 下面我们来总结一下定义(模拟)类的几种方法: 1.工厂模式 function createObject(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.ge

JavaScript定义函数的三种实现方法

JavaScript定义函数的三种实现方法 [1]正常方法 function print(msg){ document.write(msg); } 对函数进行调用的几种方式: 函数名(传递给函数的参数1,传递给函数的参数2,-.) 变量 = 函数名(传递给函数的参数1,传递给函数的参数2,-.) 对于有返回值的函数调用,也可以在程序中直接使用返回的结果,例如:alert("sum=" + square(2,3)); 不指定任何函数值的函数,返回undefined. [2]构造函数方法 

js数组去重的N种方法(小结)

对于数组去重我们有n种方法可以实现. es5实现方法 for循环+indexOf function unique(arr) { var uniqueArr = [], len = arr.length for (var i = 0; i < len; i++) { if (uniqueArr.indexOf(arr[i]) == -1) { uniqueArr.push(arr[i]) } } return uniqueArr } var arr = [1, 2, 3, 1, 5, "1&

JavaScript中定义函数的三种方法

在JavaScript的世界里,定义函数的方法多种多样,这正是JavaScript灵活性的体现,但是正是这个原因让初学者摸不着头脑,尤其对于没有 语言基础的同学.正所谓条条大道通罗马,但是如果道路太多,会让行路者不知所措,因为不知道走那条路才是正途,呵呵,废话一大篇,闲言少叙,先看代码: 复制代码 代码如下: /*第一种方法,使用function语句,格式如下*/ function fn(){ alert("这是使用function语句进行函数定义"); } fn(); /*第二种方法

JavaScript定义类或函数的几种方式小结

提起面向对象我们就能想到类,对象,封装,继承,多态.在<javaScript高级程序设计>(人民邮电出版社,曹力.张欣译.英文名字是:Professional JavaScript for Web Developers)这本书中描述的还算比较详细.我们看看JavaScript中定义类的各种方法. 1.工厂方式 javaScript中创建自己的类和对象,我们应该是必须掌握的,我们都知道javaScript中对象的属性可以在对象创建后动态定义,比如下面的代码: 复制代码 代码如下: <scr

js读取json的两种常用方法示例介绍

方法一:js中最著名的eval方法 复制代码 代码如下: var strJson="{name:'张三'}";//json var obj=eval("("+strJson+")");//转换后的json对象 alert(obj.name);//json name 此方法需要注意的是: 对象表达式{'name':'张三'}必须用"()"扩住,否则 复制代码 代码如下: var strJSON = "{name:'张三