<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>js请求</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<input id="btn1" type="button" value="发送请求" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
ajax工厂模式
每次都实例化一个单独的对象,各自保存自己的状态.
通常一些需要包含自身业务的组件可以采用工厂来封装,比如日历,表格等.
*/
function Ajax(obj){
//请求方式GET/POST,默认GET
this.method = obj.method.toUpperCase() || "GET";
//请求类型,如果不是同步就默认异步
this.async = obj.async == false ? false : true;
//请求参数
this.data = obj.data || null;
//成功返回函数
this.success = obj.success || function(){};
//失败返回函数
this.failure = obj.failure || function(){};
//请求地址
this.url = obj.url || null;
this.init.apply(this,arguments);
}
Ajax.prototype = {
//请求对象数组
requests:[],
xhr:null,
init:function(){
var xhr = null;
//判断是否当前有空闲的xhr
for(var i = 0,len = this.requests.length; i < len; i++){
//当xhr的readyState状态为0/4,都可以标识当前xhr是空闲状态.
xhr = this.requests[i];
//0:还未连接,4:请求完成
var state = xhr.readyState;
if(state === 0 || state === 4){
break;
}
else{
//没有空闲,置成null值,去创建一个新的.
xhr = null;
}
}
//这个地方还可以做成如果请求数大于N个,那么等待空闲xhr.
//如果没有空闲的,创建一个新的.
if(xhr === null){
//创建新的xhr
this.xhr = this.createHttpRequest();
this.requests.push(this.xhr);
//发送请求
this.sendRequest();
}
else{
this.xhr = xhr;
//发送请求
this.sendRequest();
}
},
createHttpRequest:function(){
console.log("createHttpRequest!!!");
var xmlhttp = null;
//XMLHttpRequest对象是w3c标准对象,所以IE君又不支持了.
if(window.XMLHttpRequest){
//非IE
xmlhttp = new XMLHttpRequest();
}
else{
if(window.ActiveXObject){
//IE
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
}
}
else{
console.log("浏览器不支持!");
}
}
return xmlhttp;
},
//发送ajax请求
sendRequest:function(){
//格式化data符合url传参格式,并不适用任何情况数据
function dataformat(data){
var d = "";
var t = new Date() - 0;
if(typeof data == "object" && data != null){
for(var k in data){
d += k + "=" + data[k] + "&"
}
//动态添加时间参数,减0转化成毫秒
d = d + "t=" + t;
return d;
}
else{
//如果是字符串直接返回
return data + "&t" + t;
}
}
function fn(){}
//请求参数
var method = this.method;
var async = this.async;
var data = this.data;
var success = this.success;
var failure = this.failure;
var url = this.url;
if(url != null){
//如果是GET请求把参数拼接到url后面
if(method == "GET" && data){
//格式化请求参数
var condi = dataformat(data);
url += (url.indexOf("?") == -1 ? "?" : "&") + condi;
//GET请求send参数null
data = null;
}
var xhr = this.xhr;
//绑定回调函数
xhr.onreadystatechange = function(scope){
return function(){
scope.callback.apply(scope,arguments);
}
}(this);
//打开请求url
xhr.open(method,url,async);
//如果是POST请求需要添加头信息
if(method == 'POST'){
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;');
}
//发送http请求
xhr.send(data);
}
else{
//没有指定请求请求地址
}
},
callback:function(){
/*
readyState一共有五个状态
0 还未连接,还没有调用open().
1 打开请求连接,还没有调用send().
2 发送请求,还没有收到服务器响应.
3 数据接收,已经收到服务器响应.
4 数据接收完毕,跟服务器交互完毕.
*/
var xhr = this.xhr;
if(xhr.readyState == 4){
//http状态
var status = xhr.status;
if(status >= 200 && status < 300){
//请求成功
this.success(xhr);
}
else{
//请求错误
this.failure(xhr);
}
}
else{
//请求失败
}
}
};
//一个例子
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
setTimeout(function(){
test1(1);
},1000);
setTimeout(function(){
test2(2);
},2000);
}
function test1(num){
var ajax = new Ajax({
url:"http://192.168.3.209/php/test.php",
method:"GET",
//传递参数
data:{name:"康德" + num,address:"当看到" + num},
success:function(xhr){
//服务器返回结果
console.log(xhr.responseText);//{"name":"康德1","address":"当看到1"}
},
error:function(xhr){
console.log(xhr);
}
});
}
function test2(num){
var ajax = new Ajax({
url:"http://192.168.3.209/php/test.php",
method:"GET",
//传递参数
data:{name:"康德" + num,address:"当看到" + num},
success:function(xhr){
//服务器返回结果
console.log(xhr.responseText);//{"name":"康德2","address":"当看到2"}
},
error:function(xhr){
console.log(xhr);
}
});
}
/*
知识点:
1.ajax简单工厂封装.
2.ajax连接池简单现实.
*/
</script>
相关推荐
Js 拦截全局ajax请求
<script type="text/javascript"> function onerror() //错误处理方法 { alert("error"); } function getInfo() //发送请求方法，包括请求方法和请求参数以及路径。 { new net.AjaxRequest("Ajaxtest.jsp",...
js ajax请求实现 struts2 action js ajax请求实现 struts2 action js ajax请求实现 struts2 action js ajax请求实现 struts2 action js ajax请求实现 struts2 action
JavaScript如何实现防止重复的网络请求的示例 在开发中，经常会遇到接口重复请求导致的各种问题。 对于重复的网络请求，会导致页面更新多次，发生页面抖动的现象，影响用户体验。 例如当前页面请求还未响应完成，...
spring boot 支持跨域 前台不需要jsonp 请求 正常js即可 spring boot 支持跨域 前台不需要jsonp 请求 正常js即可
拦截post请求关键js代码 文章源地址： https://blog.csdn.net/weixin_40855673/article/details/121575150?spm=1001.2014.3001.5501
主要介绍了javascript实现fetch请求返回的统一拦截,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
通过js发送请求的几种方法，全面 简单 有效
JS中基于XMLHttpRequest的Get 请求demo,包含2请求方式的源代码，可直接用于项目开发。
extjs ajax同步请求所需js extjs ajax同步请求所需js
如下所示： form表单ID：postform 设置表单请求url document.postform.action = SaveReturnInfo...以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了，希望大家多多支持软件开发网~
r2是request 模块的作者，推出了新的HTTP请求模块。构建在浏览器的Fetch API之上，并且用于Node.js。
正则表达式：支持标准的JS正则表达式。例如你输入的正则表达式是str，那么，实际上，程序内部就会使用new RegExp(str)初始化正则表达式。如果匹配规则是正则表达式，则修改结果（目前包括重定向至）支持使用形似$1...
大家都知道ajax是不能直接下载文件的，所以一般都是通过一个超链接的形式去下载一个文件 但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些太过勉强了，如下是一个工具方法(依赖jquery) 可以...
JavaScript应用实例-请求体.js
ci框架，代码不能运行，作为参考用，主要js包都在里面
JavaScript应用实例-HTTP请求.js
Autojs get post请求案例demo.7z
Android Webview虽然提供了页面加载及资源请求的钩子，但是对于h5的ajax请求并没有提供干涉的接口，这意味着我们不能在webview中干涉javascript发起的http请求，而有时候我们确实需要能够截获ajax请求并实现一些功能...
下面小编就为大家分享一篇解决js ajax同步请求造成浏览器假死的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧