<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>
相关推荐
2. 记录日志：记录请求的URL、参数和响应时间，便于性能优化和问题排查。 3. 数据格式转换：根据需求将服务器返回的数据格式化为适合前端使用的格式。 4. 权限验证：在请求发送前检查用户是否有权限访问特定资源。 5...
本篇文章主要探讨如何使用JavaScript实现fetch请求返回的统一拦截。 首先，我们需要理解拦截器的目的。拦截器主要用于在请求发送前或响应接收后执行一些通用操作，例如添加身份验证令牌、处理网络错误等。在axios库...
总结一下，解决js ajax同步请求造成浏览器假死的问题的关键在于理解浏览器单线程的特性及其在执行同步请求时会阻塞UI线程的行为。开发者可以通过使用异步请求或将耗时的请求操作放入setTimeout等JavaScript定时器中...
2. **模拟执行**：在Python中使用类似`execjs`或`JSDOM`的库来执行JavaScript，获取所需数据。 3. **请求头验证**：确保在请求中携带正确的头信息，例如`User-Agent`、`Referer`等，这些可能会影响到服务器的响应。 ...
在本场景中，"js分段请求导出exec了"这个标题可能指的是一个JavaScript实现的分段请求技术，用于处理大文件的导出，特别是Excel文件。这种技术通常用于优化用户体验，因为一次性下载大文件可能会导致浏览器阻塞或...
<script type="text/javascript"> function onerror() //错误处理方法 { alert("error"); } function getInfo() //发送请求方法，包括请求方法和请求参数以及路径。 { new net.AjaxRequest("Ajaxtest.jsp",...
在 Native 端，我们需要实现一个 JavaScript Interface，例如 onAjaxRequest 方法，该方法将接收 Fly.js 传来的请求对象，并完成真正的请求后，将响应对象通过 handler 返回给 Fly.js。 通过这种方式，我们就可以...
2. **流支持**：r2支持Node.js的可读/可写流，允许高效地处理大文件或持续的数据流。 3. **自动处理重定向**：如同request模块，r2也会自动处理HTTP的重定向响应，减轻开发者的工作负担。 4. **兼容性**：尽管r2基于...
标题中提到的"extjs ajax同步请求所需js"是指ExtJS框架中用于执行同步Ajax请求的相关JavaScript代码。在ExtJS中，Ajax请求通常通过`Ext.Ajax`对象来实现。与传统的异步请求不同，同步请求会阻塞浏览器，直到请求完成...
总的来说，通过合理地管理和拦截请求，我们可以有效地防止JavaScript中的重复网络请求，从而提高应用性能和用户体验。这种方法不仅适用于单页应用（SPA），也可以应用于任何需要处理异步请求的JavaScript项目。
本篇文章将深入探讨如何使用Node.js进行HTTP请求来获取并处理HTML、CSS和JavaScript资源。 一、Node.js中的HTTP模块 Node.js内置了http模块，它提供了一套API用于创建HTTP服务器和客户端。在客户端模式下，我们...
spring boot 支持跨域 前台不需要jsonp 请求 正常js即可 spring boot 支持跨域 前台不需要jsonp 请求 正常js即可
在JavaScript编程中，`prototype.js`是一个常用的库，它扩展了JavaScript的基本对象，提供了许多方便的功能，包括Ajax（异步JavaScript和XML）操作。在处理中文参数时，尤其是在使用Ajax的GET请求时，可能会遇到中文...
大家都知道ajax是不能直接下载文件的，所以一般都是通过一个超链接的形式去下载一个文件 但是当牵扯到需要发送很多数据到服务器上再下载的时候超链接的形式就有些太过勉强了，如下是一个工具方法(依赖jquery) 可以...
2. 逆向JS（请求数据加密、响应数据解密） 许多现代网站使用JavaScript进行动态加载和数据加密，以提高安全性。逆向工程JavaScript的主要目的是理解其背后的逻辑，以便于我们能正确地构造请求并解析响应。 - 请求...
首先，Node.js是一种基于Chrome V8引擎的JavaScript运行环境，它允许开发者使用JavaScript来编写服务器端应用程序。Node.js的事件驱动和非阻塞I/O模型使其非常适合于处理大量并发数据传输。Node.js官方提供了丰富的...
拦截post请求关键js代码 文章源地址： https://blog.csdn.net/weixin_40855673/article/details/121575150?spm=1001.2014.3001.5501
2. 为了发送数据，需要借助其他库（如qs）来序列化数据。首先通过npm安装qs模块： ``` npm install qs ``` 3. 然后在main.js中引入qs模块，并将qs实例挂载到Vue的原型上，使其能够在全局范围内使用。 ```...
通过js发送请求的几种方法，全面 简单 有效
JS中基于XMLHttpRequest的Get 请求demo,包含2请求方式的源代码，可直接用于项目开发。