用原生JS实现AJAX和JSONP
前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的。其实,原生JavaScript实现AJAX并不难,下面我们可是演示如何实现利用原生JS构建简单的AJAX,还有跨域请求JSONP的实现。
AJAX的根本是XMLHttprequest,而一个完整的AJAX请求一般包括以下步骤:
- 实例化XMLHttpRequest对象
- 连接服务器
- 发送请求
- 接收响应数据
下面我们使用原生JS封装一个简单地ajax()方法:
const Ajax = (object) => {
object = object || {};
object.data = object.data || {};
//判断请求类型为AJAX或者JSONP
let json = object.jsonp ? Jsonp(object) : ajax(object); //设置ajax方法
function ajax(object) {
// 1.设置请求方式:如果没有制定则默认为GET
object.type = (object.type || 'GET').toUpperCase();
// 2.设置data数据的格式化
object.data = formateObject(object.data);
// 3.实例化XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 4.监听事件,只要readyState改变,就会调用readystatechange事件
xhr.onreadystatechange = function(){
// readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
if(xhr.readyState == 4) {
let status = xhr.status;
// status : HTTP响应的状态码,2开头表示成功
if(status >=200 && status < 300){
let response = '';
// 判断接受数据的内容类型
let type = xhr.getResponseHeader('Content-type');
if(type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML; //Document对象响应
} else if(type === 'application/json') {
response = JSON.parse(xhr.responseText); //JSON响应
} else {
response = xhr.responseText; //字符串响应
};
// 成功回调函数
object.success && object.success(response);
}else {
object.error && object.error(response);
}
}
} // 5.连接和传输数据
if(object.type == 'GET') {
// 三个参数:请求方式、请求地址(get方式时,传输数据是加在地址后的)、是否异步请求(同步请求的情况极少);
xhr.open(object.type, object.url + '?' + object.data, true);
xhr.send(null);
} else {
xhr.open(object.type, object.url, true);
//必须,设置提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// 传输数据
xhr.send(object.data);
}
} //data的格式化方法
function formateObject(data){
if(data){
let arr = [];
for(let name in data){
//encodeURIComponent() :用于对 URI 中的某一部分进行编码
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
} //为了防止缓存,在后面添加一个随机数
arr.push('randomV=' + randomNumber());
return arr.join('&');
}else {
console.error('无法格式化请求数据')
}
} //生成随机数的方法
function randomNumber(){
return Math.floor(Math.random()*10000+404);
} };
同理,我们也可以实现一个JSONP的方法
//设置Jsonp方法
function Jsonp(object) {
// 创建script标签并加入到页面中
let callbackName = object.jsonp,
head = document.getElementsByTagName('head')[0];
// 设置传递给后台的回调参数名
object.data['callback'] = callbackName;
let data = formateObject(object.data),
script = document.createElement('script');
head.appendChild(script);
// 创建JSONP的回调函数
//创建jsonp回调函数
window[callbackName] = function(json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
object.success && object.success(json);
};
// 发送请求
script.src = object.url + '?' + data;
//为了得知此次请求是否成功,设置超时处理
if(object.time) {
script.timer = setTimeout(function() {
window[callbackName] = null;
head.removeChild(script);
object.error && object.error({
message: '请求超时'
});
}, time);
} }
下面我们来尝试一下这两个方法是否管用
新建一个index.html文件,新建一个test.json和jsonp.php
利用nginx搭建一个简单地服务器,因为谷歌默认不允许本地文件进行ajax请求:
test.json内容
{
"name" : "111",
"gender" : "222"
}
jsonp.php内容:
callback({"name":"李大师","gender":"是前端开发工程师"})
index.html内容
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>原生JS实现ajax和JSONP请求</title>
<style type="text/css">
input[type='button'] {
margin:20px;
}
</style>
</head>
<body>
<button>点击验证AJAX</button>
<input type="button" value="点击验证JSONP" onclick="">
<div id="div1" class=""> </div>
</body>
<script type="text/javascript">
<!--
//原生JS方法封装AJAX请求和JSONP请求 window.Ajax = (object) => {
object = object || {};
object.data = object.data || {};
//判断请求类型为AJAX或者JSONP
let json = object.jsonp ? Jsonp(object) : ajax(object); //设置ajax方法
function ajax(object) {
// 1.设置请求方式:如果没有制定则默认为GET
object.type = (object.type || 'GET').toUpperCase();
// 2.设置data数据的格式化
object.data = formateObject(object.data);
// 3.实例化XMLHttpRequest对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 4.监听事件,只要readyState改变,就会调用readystatechange事件
xhr.onreadystatechange = function(){
// readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
if(xhr.readyState == 4) {
let status = xhr.status;
// status : HTTP响应的状态码,2开头表示成功
if(status >=200 && status < 300){
let response = '';
// 判断接受数据的内容类型
let type = xhr.getResponseHeader('Content-type');
if(type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML; //Document对象响应
} else if(type === 'application/json') {
response = JSON.parse(xhr.responseText); //JSON响应
} else {
response = xhr.responseText; //字符串响应
};
// 成功回调函数
object.success && object.success(response);
}else {
object.error && object.error(response);
}
}
} // 5.连接和传输数据
if(object.type == 'GET') {
// 三个参数:请求方式、请求地址(get方式时,传输数据是加在地址后的)、是否异步请求(同步请求的情况极少);
xhr.open(object.type, object.url + '?' + object.data, true);
xhr.send(null);
} else {
xhr.open(object.type, object.url, true);
//必须,设置提交时的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// 传输数据
xhr.send(object.data);
}
} //设置Jsonp方法
function Jsonp(object) {
// 创建script标签并加入到页面中
let callbackName = object.jsonp,
head = document.getElementsByTagName('head')[0];
// 设置传递给后台的回调参数名
object.data['callback'] = callbackName;
let data = formateObject(object.data),
script = document.createElement('script');
head.appendChild(script);
// 创建JSONP的回调函数
//创建jsonp回调函数
window[callbackName] = function(json) {
head.removeChild(script);
clearTimeout(script.timer);
window[callbackName] = null;
object.success && object.success(json);
};
// 发送请求
script.src = object.url + '?' + data;
//为了得知此次请求是否成功,设置超时处理
if(object.time) {
script.timer = setTimeout(function() {
window[callbackName] = null;
head.removeChild(script);
object.error && object.error({
message: '请求超时'
});
}, time);
} } //data的格式化方法
function formateObject(data){
if(data){
let arr = [];
for(let name in data){
//encodeURIComponent() :用于对 URI 中的某一部分进行编码
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
} //为了防止缓存,在后面添加一个随机数
arr.push('randomV=' + randomNumber());
return arr.join('&');
}else {
console.error('无法格式化请求数据')
}
} //生成随机数的方法
function randomNumber(){
return Math.floor(Math.random()*10000+404);
} }; const button = document.querySelector('input[type="button"]');
const btn = document.querySelector('button'); const successFun = (res) => {
console.log(res);
let div1= document.querySelector("#div1");
div1.innerHTML = res.name + res.gender;
};
const obj = {
url : 'jsonp.php',
type : 'GET',
jsonp : 'callback',
data : '',
success: successFun,
error: function(){
}
}; const obj1 = {
url : 'test.json',
type : 'GET',
data : '',
success: successFun,
error: function(){
}
}; button.addEventListener('click', () => Ajax(obj));
btn.addEventListener('click',() => Ajax(obj1)); //-->
</script>
</html>
测试效果:
验证JSONP:
用原生JS实现AJAX和JSONP的更多相关文章
- 用原生js实现ajax、jsonp
转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件,并提供对应方法
JS原生AJAX ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRequest 对象: ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生JS实现AJAX、JSONP及DOM加载完成事件
一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面:ajax的技术核心是 XMLHttpRequest 对象:ajax 请求过程:创建 XMLHttpRequest 对象.连接服务 ...
- 原生JS实现Ajax及Ajax的跨域请求
前 言 如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...
- 原生js实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...
- 使用原生js写ajax
// 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生JS的Ajax技术
1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待 卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...
- 原生js中用Ajax进行get传参
原生js中用Ajax进行get传参 案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
随机推荐
- Docker学习第二天
CentOS 系列安装 Docker Docker 支持 CentOS6 及以后的版本. CentOS6 对于 CentOS6,可以使用 EPEL 库安装 Docker,命令如下 [root@MSJT ...
- C语言指针使用不当带来的内存不可读
前几天遇到一个C语言初学者提到的一个问题,代码我做了一些修改,如下: #include <stdio.h> #include <string.h> int main(void) ...
- 学习2:内容# 1.while # 2.字符串格式化 # 3.运算符 # 4.编码初始
目录 1.while循环 2.字符串格式化 3.运算符 4.编码初始 1.while循环 while -- 关键字 (死循环) if 条件: 结果 while 条件: 循环体 while True: ...
- Worker-Thread设计模式
import java.util.Random; import java.util.concurrent.ThreadLocalRandom; import java.util.concurrent. ...
- Java编程思想:File类list()方法
import java.util.regex.Pattern; import java.io.File; import java.io.FilenameFilter; public class Tes ...
- python基础知识二 列表、元组、range
3.6.2 列表 1.列表 -- list 有序,可变,支持索引,用于存储数据(字符串,数字,bool,列表,字典,集合,元组,). list1 = [] list1 = ['alex',12,T ...
- [Windows无法连接到 System Event Notification Service服务]解决方案
我之前使用Windows的过程的有出现过以下问题,之前因为比较急就匆忙解决了没来得及把解决方法写下来. 正好今天有个朋友电脑也出现此问题过来找我寻求解决方法,便把解决方法写了下来. 电脑出现的问题,如 ...
- 安卓开发之详解getChildFragmentManager和getsupportFragmentManager和getFragmentManager详解
安卓开发之详解getChildFragmentManager和getsupportFragmentManager和getFragmentManager详解 getFragmentManager()所得 ...
- android开发--使用webView加载tel协议不会打开拨号盘解决
在加载url之前进行判断,url是否是tel协议开头,然后进行加载,即可打开拨号盘 mWebView.setWebViewClient(new WebViewClient() { @Override ...
- [剑指offer] 34. 第一个只出现一次的字符
题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 一次遍历存储到哈希表 一次 ...