手动封装AJAX
正常函数的调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>函数的调用</title>
</head>
<body>
<script>
function f1(){
console.log('1111111111111');
console.log('1111111111111');
console.log('1111111111111');
console.log('1111111111111');
console.log('1111111111111');
}
function f2(){
console.log('222222222222222');
console.log('222222222222222');
f1();
console.log('222222222222222');
console.log('222222222222222');
console.log('222222222222222');
}
function f3(){
console.log('3333333333333333');
console.log('3333333333333333');
f2();
console.log('3333333333333333');
console.log('3333333333333333');
console.log('3333333333333333');
}
f3()
</script>
</body>
</html>
调用顺序：
回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>回调函数</title>
</head>
<body>
<script> 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);
</script>
</body>
</html>
调用顺序：
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
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>studentsJSON页面</title>
<!-- <script src="/assets/js/myAjax.js"></script> -->
<!-- 引入jQuery文件 -->
<script src="/assets/js/jquery-1.12.2.js"></script> </head> <body>
<h2>这是studentsJSON页面</h2>
<input type="button" id="btn" value="获取JSON数据">
<table border="1">
<thead>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
<th>地址</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小苏</td>
<td>男</td>
<td>18</td>
<td>前端</td>
<td>佛山</td>
</tr>
</tbody>
</table> <script>
// 查找元素
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 += `
<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].gender}</td>
<td>${data[i].age}</td>
<td>${data[i].zhuanye}</td>
<td>${data[i].address}</td>
</tr>
`
}
// 渲染页面中的数据
tbody.innerHTML = str;
},
})
}) </script>
</body> </html>
studentsXML.html
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>studentsXML页面</title>
<!-- 引入封转好的AJAX文件 -->
<script src="/assets/js/myAjax.js"></script>
</head> <body>
<h2>这是一个使用XML数据渲染的列表</h2>
<input type="button" id="btn" value="获取XML数据">
<table border="1">
<thead>
<th>id</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>专业</th>
<th>地址</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小苏</td>
<td>男</td>
<td>18</td>
<td>前端</td>
<td>佛山</td>
</tr>
</tbody>
</table> <script>
// 查找元素
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<items.length; i++){
str += `
<tr>
<td>${items[i].querySelector('id').innerHTML}</td>
<td>${items[i].querySelector('name').innerHTML}</td>
<td>${items[i].querySelector('gender').innerHTML}</td>
<td>${items[i].querySelector('age').innerHTML}</td>
<td>${items[i].querySelector('zhuanye').innerHTML}</td>
<td>${items[i].querySelector('address').innerHTML}</td>
</tr>
`
}
tbody.innerHTML = str;
}
}); }) </script>
</body> </html>
手动封装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: <!DOCTYPE html> <html lang="en"> <head ...
- 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.封装ajax
<script> //封装ajax // 函数名 ajax // 函数的参数 // url: 请求的地址 // type: 请求的方式 get /post // data: 要上传的数据 ...
- 自定义封装ajax，复制即可用
支持get.post请求 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 封装ajax，让调用变得简单优化
思考一下: 通常我们在使用ajax来发送接口请求时,每一次都会调用ajax固定的元素,比如data.url.method.success.error等.那么我们想一下能不能先把ajax封装起来,在每次 ...
随机推荐
- python使用cPickle模块序列化实例
python使用cPickle模块序列化实例 这篇文章主要介绍了python使用cPickle模块序列化的方法,是一个非常实用的技巧,本文实例讲述了python使用cPickle模块序列化的方法,分享 ...
- C# WPF 如何禁止窗口拖到屏幕边缘自动最大化
win7以上的系统新增了功能--窗口拖到屏幕边缘自动最大化
- Cannot allocate memory for the buffer pool
优化了一通,启动不了 直接上日志 innodb_buffer_pool_size”.”key_buffer_size” 的大小设置,适当的调大内存分配,减小,然后保存配置文件,重新尝试启mysql 成 ...
- hystrix熔断器
在一个具有多服务的应用中,假如由于其中某一个服务出现问题,导致响应速度变慢,或是根本没有响应返回,会导致它的服务消费者由于长时间的等待,消耗尽线程,进而影响到对其他服务的线程调用,进而会转变为整个应用 ...
- Celery-一个会做异步任务,定时任务的芹菜
Celery 分布式任务队列 同步与异步 比如说你要去一个餐厅吃饭,你点完菜以后假设服务员告诉你,你点的菜,要两个小时才能做完,这个时候你可以有两个选择 一直在餐厅等着饭菜上桌 你可以回家等着,这个时 ...
- C++学习笔记（2）---2.5 C++函数编译原理和成员函数的实现
转载自:http://c.biancheng.NET/cpp/biancheng/view/2996.html点击打开链接 从上节的例子可以看出,对象的内存模型中只保留了成员变量,除此之外没有任何其他 ...
- FZU 1576【计算几何/费马点】
Oaiei居住在A城市,并且是这个城市建设的总设计师.最近有个问题一直困恼着他.A城市里有三个大型工厂,每个大型工厂每天都需要消耗大量的石油,现在城市里要建设一个石油中转站,从石油中转站到三个大型工厂 ...
- Jmeter压测报错：Non HTTP response code: java.net.ConnectExceptionexception的解决办法
前一段时间进行jmeter压测时,一直报错,查看了下日志才发现报了一堆Non HTTP response code: java.net.ConnectExceptionexception,直接jmet ...
- 计算机网络3.2&3.3（第二节介质&第三节多路复用）
有限的传播介质 双绞线 双绞线电缆 双绞线总结 2 同轴电缆 粗细电缆的传输距离 现在基本都用双绞线和光线 同轴电缆用于居民小区和家庭使用 3 光纤 光纤中以光信号的形式进行传播 正如我们现在看到这样 ...
- day38 19-Spring整合web开发
整合Spring开发环境只需要引入spring-web-3.2.0.RELEASE.jar这个jar包就可以了,因为它已经帮我们做好了. Spring整合web开发,不用每次都加载Spring环境了. ...