<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>
<!-- 普通ajax请求 -->
<input id="btn1" type="button" value="发送请求" />
<!-- 单例ajax请求 -->
<input id="btn2" type="button" value="发送请求" />
<input id="btn3" type="button" value="发送请求" />
</body>
</html>
<script type="text/javascript">
//兼容ie浏览器测试
var console = console || {};
console.log = console.log || function(a){
alert(a);
}
/*
js请求有很多方式,
同步的有表单提交submit(),a标签,
异步的有XMLHttpRequest,iframe,
跨域请求可以使用script标签.
*/
/*
普通ajax请求,请求服务器的时候需要考虑是采用GET方式还是POST方式,
如果只是为了获取数据的话,应该使用GET,因为GET请求的数据会被浏览器缓存起来,
但是需要数据请求时候的URL长度不能超过2048个字符(IE对此有限制).
*/
/*
发起一个ajax请求,可以分成5步:
1.创建一个http请求对象.
2.打开请求url.
3.绑定请求回调函数.
4.发送http请求.
5.等待回调.
*/
//创建http请求函数
function CreateHttpRequest(){
//ajax请求对象
var request = null;
//XMLHttpRequest对象是w3c标准对象,所以IE君又不支持了.
if(window.XMLHttpRequest){
//非IE
request = new XMLHttpRequest();
}
else{
if(window.ActiveXObject){
//IE
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
request = new ActiveXObject("msxml2.XMLHTTP");
}
}
else{
console.log("浏览器不支持!");
}
}
return request;
}
//一个例子
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
//第一个创建http请求对象
var request = CreateHttpRequest();
if(request !== null){
//第二步打开请求地址
var url = "http://192.168.3.209/php/a.html";
//open(method,url,async),method请求类型GET/POST,url请求地址,async请求方式true(异步)/false(同步),同步请求会锁死浏览器.
request.open("GET",url,true);
//第三步绑定回调函数
request.onreadystatechange = function(){
//第五步等待请求返回
if(request.readyState == 4){
//请求成功,数据接收完成...;
if(request.status == 200){
//数据处理完成
console.log(request.responseText);
}
else{
}
}
else{
}
}
//第四步发送请求,send(data),POST请求参数传递,格式a=1&b=2
request.send(null);
}
else{
//创建请求对象失败
}
}
/*
接收服务端返回数据有两种方式.
responseText:接收服务器返回字符,比如普通的字符串或者JSON格式字符串等.
responseXML:接收服务器返回的document文档,比如直接请求某个xml文档等.
得到responseXML返回document文档之后,
可以通过getElementsByTagName获取节点.
*/
/*
单例模式,封装一下
*/
var Ajax = function(){
//创建http请求函数
function createHttpRequest(){
//XMLHttpRequest对象是w3c标准对象,所以IE君又不支持了.
if(window.XMLHttpRequest){
//非IE,延时加载,减少浏览器判断
createHttpRequest = function (){
//ajax请求对象
var request = null;
request = new XMLHttpRequest();
return request;
}
}
else{
if(window.ActiveXObject){
//IE
try{
createHttpRequest = function(){
//ajax请求对象
var request = null;
request = new ActiveXObject("Microsoft.XMLHTTP");
return request;
}
}
catch(e){
createHttpRequest = function(){
//ajax请求对象
var request = null;
request = new ActiveXObject("msxml2.XMLHTTP");
return request;
}
}
}
else{
console.log("浏览器不支持!");
}
}
return createHttpRequest();
}
function request(url,opt){
//格式化data符合url传参格式,并不适用任何情况数据
function dataformat(data){
var d = "";
if(typeof data == "object" && data != null){
for(var k in data){
d += k + "=" + data[k] + "&"
}
return d.substring(0,d.length - 1);
}
else{
//如果是字符串直接返回
return data;
}
}
function fn(){}
//请求方式GET/POST,默认GET
var method = opt.method || "GET",
method = method.toUpperCase();
//请求类型,如果不是同步就默认异步
var async = opt.async == false ? false : true;
//请求参数
var data = opt.data || null;
//成功返回函数
var success = opt.success || fn;
//失败返回函数
var failure = opt.failure || fn;
//如果是GET请求把参数拼接到url后面
if(method == 'GET' && data){
//格式化请求参数
var condi = dataformat(data);
url += (url.indexOf('?') == -1 ? '?' : '&') + condi;
//GET请求send参数null
data = null;
}
//创建http请求
var xhr = createHttpRequest();
//绑定回调函数
xhr.onreadystatechange = function(){
//回调
callback(xhr,success,failure);
};
//打开请求url
xhr.open(method,url,async);
//如果是POST请求需要添加头信息
if(method == 'POST'){
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;');
}
//发送http请求
xhr.send(data);
}
function callback(xhr,success,failure){
/*
readyState一共有五个状态
0 还未连接,还没有调用open().
1 打开请求连接,还没有调用send().
2 发送请求,还没有收到服务器响应.
3 数据接收,已经收到服务器响应.
4 数据接收完毕,跟服务器交互完毕.
*/
if(xhr.readyState == 4){
//http状态
var status = xhr.status;
if(status >= 200 && status < 300){
//请求成功
success(xhr);
}
else{
//请求错误
failure(xhr);
}
}
else{
//请求失败
}
}
return {request:request};
}();
//举个例子
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
//请求地址
var url = "http://192.168.3.209/php/test.php";
Ajax.request(url,{
method:"GET",
//传递参数
data:{name:"康德",address:"当看到"},
success:function(xhr){
//服务器返回结果
console.log(xhr.responseText);
},
error:function(xhr){
console.log(xhr);
}
});
}
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
//请求地址
var url = "http://192.168.3.209/php/test.php";
Ajax.request(url,{
method:"GET",
//传递参数
data:{name:"wed",address:"vsdv"},
success:function(xhr){
//服务器返回结果
console.log(xhr.responseText);
},
error:function(xhr){
console.log(xhr);
}
});
}
/*
ajax请求如果请求的地址相同,经常会被浏览器缓存困扰.
如果发现明明发送了请求,服务器确没有响应,那就可能会请求被缓存了.
通常解决的办法是动态添加一个时间参数.
*/
//修改dataformat函数,动态添加时间参数
function dataformat(data){
var d = "";
//动态添加时间参数,减0转化成毫秒
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;
}
}
/*
这种封装还是有一个缺陷,就是每执行一次请求就会创建一个XMLHttpRequest对象.
在某种程度上这应该算是一种资源浪费.
*/
/*
知识点:
1.ajax请求的5个步骤.
2.ajax请求接收返回数据的两种方式.
3.ajax简单封装.
4.ajax请求缓存简单解决方法.
*/
</script>
相关推荐
1. 统一错误处理：无论请求来自哪个部分，都可以确保有统一的错误反馈机制。 2. 记录日志：记录请求的URL、参数和响应时间，便于性能优化和问题排查。 3. 数据格式转换：根据需求将服务器返回的数据格式化为适合前端...
本篇文章主要探讨如何使用JavaScript实现fetch请求返回的统一拦截。 首先，我们需要理解拦截器的目的。拦截器主要用于在请求发送前或响应接收后执行一些通用操作，例如添加身份验证令牌、处理网络错误等。在axios库...
总结一下，解决js ajax同步请求造成浏览器假死的问题的关键在于理解浏览器单线程的特性及其在执行同步请求时会阻塞UI线程的行为。开发者可以通过使用异步请求或将耗时的请求操作放入setTimeout等JavaScript定时器中...
1. **解析JavaScript**：将JavaScript代码解析成可执行的形式，理解其中的逻辑，找出数据是如何被构造的。 2. **模拟执行**：在Python中使用类似`execjs`或`JSDOM`的库来执行JavaScript，获取所需数据。 3. **请求头...
在本场景中，"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。 通过这种方式，我们就可以...
标题中提到的"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) 可以...
本主题将深入探讨两个关键方面：如何记录捕获各网站的数据以及如何逆向工程JavaScript以处理加密的请求和响应数据。 1. 记录捕获各网站的数据 在Python中，我们可以使用多个库来实现网页抓取，如BeautifulSoup、...
首先，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
1. 在Vue项目的main.js文件中，修改axios的默认请求头，将其设置为`application/x-www-form-urlencoded`。这是因为`application/x-www-form-urlencoded`通常不需要浏览器进行预请求。 ```javascript import axios...
通过js发送请求的几种方法，全面 简单 有效
Vue.js 的官方推荐插件 Axios 通常用于处理HTTP请求，但默认情况下，它也会受到同源策略的约束。本文将详细介绍如何解决 Vue.js 中使用 Axios (旧版本中称为 `$http`) 进行GET和POST请求时的跨域问题。 首先，我们...
如下所示： form表单ID：postform 设置表单请求url document.postform.action = SaveReturnInfo...以上就是小编为大家带来的js 提交form表单和设置form表单请求路径的实现方法全部内容了，希望大家多多支持软件开发网~