手动写ajax,手动封装AJAX

最新推荐文章于 2022-03-09 22:27:27 发布

weixin_39622568

最新推荐文章于 2022-03-09 22:27:27 发布

阅读量162

点赞数

文章标签：手动写ajax

正常函数的调用

函数的调用

function f1(){

console.log('1111111111111');

}

function f2(){

console.log('222222222222222');

f1();

console.log('222222222222222');

}

function f3(){

console.log('3333333333333333');

f2();

console.log('3333333333333333');

}

f3()

调用顺序：

调用f3函数，输出2次33333，然后调用f2函数，输出2次22222，调用f1函数，输出5次1111111；

f1的代码执行完成后会回到被调用的位置接着执行代码，此时输出3次222222，然后回到f2被调用的位置，输出3次333

回调函数

function getResult(n1,n2,fn){

var result = fn(n1,n2)

return result;

}

var res = getResult(120,230, function (a, b) {

return a + b;

})

console.log(res);

调用顺序：

调用getResult时传入3个参数，第3个是一个匿名函数，函数里面计算ab的和，getResult接受到120，230参数分别赋值给n1和n2，然后调用fn函数进行计算值，返回结果给result，返回result给res接收，最后控制台输出res就得到350了。

Get和Post请求的差异

封转AJAX异步发送请求的过程

目录结构：

myAjax.js

1.创建异步对象

2. 设置请求行

3. 设置请求头

4. 设置请求体

5. 设置监视异步对象状态

// 这种方式不好，参数固定死了，不灵活，顺序只能这样

// ajax是一个函数，如果引入到别的文件当中，有可能会靠变量或函数的污染

/* function ajax(params) {

var xhr = new XMLHttpRequest();

// 设置请求行

xhr.open('get', '/getStudentsJSON');

// 设置请求头

// get请求可以省略这一步

// 设置请求体

xhr.send(null);

// 监听异步对象状态

xhr.onreadystatechange = function () {

// 判断数据是否全部接收完成

if (xhr.status == 200 && xhr.readyState == 4) {

// 由于服务端响应过来的json数据是字符串类型的，这里需要把它转换成对象或者数组类型，使用JSON.parse()方法

var obj = JSON.parse(xhr.responseText);

console.log(obj);

}

} */

var $ = {

// 创建一个名为convert方法，把对象转换成拼接字符串的方法

convertTostring: function(obj){

var str = '';

for(var key in obj){

str += key + '=' + obj[key] + '&';

console.log(str);

}

console.log(str.slice(0,-1));

return str.slice(0,-1);

// 代码没问题

// 创建一个名为ajax方法，进行使用异步对象发送请求

ajax: function(params) { // 传入的参数是一个对象

// 这个parmas对象里面应该包括：type，url，data，callback

// 定义变量获取数据, 短路运算

var type = params.type || 'get'; // 获取请求的方式

var url = params.url || location.pathname; //location.href也可以; 获取要发送的目标地址

var data = this.convertTostring(params.data || {}); // 获取要发送的数据

var success = params.success;

var dataType = params.dataType || 'text/plain'; // 什么都没有就以纯字符串

// 创建异步AJAX对象

var xhr = new XMLHttpRequest();

if(type=='get'){

url = url+"?"+data; //http://baidu.com:3002/submit?userName=jack&passPWd=jack1234

data = null;

}

// 设置请求行

xhr.open(type, url);

// 设置请求头

if(type=='post'){

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

}

// get请求可以省略这一步

// 设置请求体

xhr.send(data); // 这里的data就是通过convertTostring方法拼接的字符串

// 监听异步对象状态

xhr.onreadystatechange = function () {

// 判断数据是否全部接收完成

if (xhr.status == 200 && xhr.readyState == 4) {

var res;

// 把服务器响应回来的数据进行判断然后保存起来

if(dataType =='json'){

res = JSON.parse(xhr.responseText)

}else if(dataType=='xml'){

res = xhr.responseXML;

}else{

res = xhr.responseText; // 当成纯文本字符串接收

}

success(res);

}

studentsJSON.html

studentsJSON页面

这是studentsJSON页面

id姓名性别年龄专业地址

1小苏男18前端佛山

// 查找元素

var btn = document.querySelector('#btn');

var tbody = document.querySelector('tbody');

// 给btn绑定点击事件

btn.addEventListener('click', function () {

$.ajax({

type: 'get',

url: '/getStudentsJSON',

dataType: 'json', // 告诉ajax函数，将返回来的数据以json的形式进行处理

// 创建一个方法

success: function (obj) {

var data = obj.data;

var str = '';

for (var i = 0; i < data.length; i++) {

// 套用ES6的模版快速拼接字符串

str += `

${data[i].id}${data[i].name}${data[i].gender}${data[i].age}${data[i].zhuanye}${data[i].address}

}

// 渲染页面中的数据

tbody.innerHTML = str;

})

studentsXML.html

studentsXML页面

这是一个使用XML数据渲染的列表

id姓名性别年龄专业地址

1小苏男18前端佛山

// 查找元素

var btn = document.querySelector('#btn');

var tbody = document.querySelector('tbody');

// 给按钮绑定点击事件

btn.addEventListener('click', function () {

// 调用ajax方法传入参数

$.ajax({

type: 'get', // 请求方式

url: '/getStudentsXML', // 服务器接口地址

dataType: 'xml', // 服务器返回的数据格式

success: function(obj){ // 回调函数

console.log(obj);

console.log(typeof(obj));

var items = obj.querySelector('items').children;

var str = '';

for(var i=0; i

str += `

${items[i].querySelector('id').innerHTML}${items[i].querySelector('name').innerHTML}${items[i].querySelector('gender').innerHTML}${items[i].querySelector('age').innerHTML}${items[i].querySelector('zhuanye').innerHTML}${items[i].querySelector('address').innerHTML}

}

tbody.innerHTML = str;

}

});

})

如果不想手动封装AJAX，可以使用JQuery，直接引入jQ文件，其他不需要改，直接$.ajax({传参})就可以了。

使用promise手动封装ajax函数

最近在做一个单页应用,node和浏览器仅通过json传输数据,因为是只有自己用等于是锻炼一下自己,所以也不用考虑seo的问题,node端我已经写好了,但是浏览器端想要用ajax原生太麻烦,用封装的函数 ...

使用原生JS封装Ajax

使用原生的JS封装 Ajax,实现仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

原生javascript封装ajax和jsonp

在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp:

AJAX编程-封装ajax工具函数

即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...

javascript 【封装AJAX】

post function createXHR() { if (typeof XMLHttpRequest != 'undefined') { return new XMLHttpRequest(); ...

封装ajax原理

封装ajax原理首先处理用户如果不传某些参数,设置默认值 type默认get 默认url为当前页默认async方式请求 data数据默认为{} 处理用户传进来的参数对象遍历,拼接成key=va ...

04&period;封装ajax

//封装ajax // 函数名 ajax // 函数的参数 // url: 请求的地址 // type: 请求的方式 get /post // data: 要上传的数据 ...

自定义封装ajax，复制即可用

支持get.post请求

...

封装ajax，让调用变得简单优化

思考一下: 通常我们在使用ajax来发送接口请求时,每一次都会调用ajax固定的元素,比如data.url.method.success.error等.那么我们想一下能不能先把ajax封装起来,在每次 ...

随机推荐

C++：对象指针

对象指针概念:每一个对象在初始化后都会在内存中占有一定的空间.因此,既可以通过对象名访问, 也可以通过一个对象地址来访问一个对象.对象指针就是用于存放对象地址的变量. 声明对象指针的一般语法格式为:类 ...

JS函数——作用域

一 : 作用域的相关概念首先看下变量作用域的概念:一个变量的作用域是程序源代码中定义这个变量的区域.————————第六版全局变量拥有全局作用域,函数 ...

AJAX同步与异步

今天来大概说说AJAX中的同步与异步.其实,就我的理解,同步与异步的区别就是程序执行过程中是否有等待. 同步:意思就是js代码加载到当前的 AJAX时候,会等待AJAX代码执行完毕后再开始加载其他代码 ...

MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器

实现MVC自定义过滤器,自定义Area过滤器,自定义Controller,Action甚至是ViewData过滤器 MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过A ...

js中的整型都是用double存储的，有时候不精确，如，

sss=187948800449444864 187948800449444860 好像16位的时候还可以. http://segmentfault.com/a/1190000002608050

Kafka技术内幕读书笔记之(四) 新消费者——消费者提交偏移量

消费组发生再平衡时分区会被分配给新的消费者,为了保证新消费者能够从分区的上一次消费位置继续拉取并处理消息,每个消费者需要将分区的消费进度,定时地同步给消费组对应的协调者节点 .新AP I为客户端提供了 ...

ef codefirst 模型字段类型与sqlserver表字段类型对应概要

1.sqlserver中nvarchar(50),对应EF中: [MaxLength(, ErrorMessage = "最大长度为{1}")] public string Nam ...

C&num;打印图片

打印的原理是:生成mdi文件,系统碰到mdi的时候会自动以打印的方式处理.所以,不管用什么模板,什么方式:能在PrintPage事件处理中,生成一张要打印内容的图片就OK了! C#实现打印源码如下: ...

R语言学习——输入与输出

导入数据: grades

让IE兼容console——&OpenCurlyDoubleQuote;由于出现错误80020101而导致此项操作无法完成”的解决方案

问题描述经测试发现问题只出现在: 1.原生IE8(其他版本IE模拟出的IE8无此问题) 2.从打开IE8没有开启过F12(曾经开启过又关闭的无此问题) IE8报错“由于出现错误80020101而导致 ...

weixin_39622568

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手动写ajax,手动封装AJAX

正常函数的调用函数的调用function f1(){console.log('1111111111111');console.log('1111111111111');console.log('1111111111111');console.log('1111111111111');console.log('1111111111111');}function f2(){console.log('2...
复制链接

扫一扫