ajax发送请求

最新推荐文章于 2024-07-15 22:52:27 发布
最新推荐文章于 2024-07-15 22:52:27 发布
阅读量174 收藏
点赞数
分类专栏： AJAX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzcrystal/article/details/104180528
版权

ajax.js

向服务器发送请求

//对象转字符串
function objToStr(obj){
	obj.t = new Date().getTime();
	var res = [];
	for (var key in obj) {
		//防止url中出现中文，如果有中文，需要转码
		//调用encodeURIComponent()方法
		//URL中只能出现字母、数字、下划线、ASCII码
		res.push(encodeURIComponent(key)+"="+encodeURIComponent(obj[key]));
	}
	return res.join("&");
}

function ajax(type,url,obj,timeout,success,error){
	//0.将json对象转为字符串
	var str = objToStr(obj);//格式为:key=value&key=value;
	//1.创建一个异步对象
	var xmlhttp,timer;
	if (window.XMLHttpRequest) {//code for IE7+,firefox,chrome,opera,safari
		xmlhttp = new XMLHttpRequest();
	} else {//code for IE6,IE5
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//2.设置请求方式和请求地址
	if (type.toLowerCase === "get") {
		//2.设置请求方式和请求地址
		xmlhttp.open(type,url+"?"+str,true);
		//3.发送请求
		xmlhttp.send();
	} else {
		xmlhttp.open(type,url,true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//3.发送请求
		xmlhttp.send(str);
	}
	
	//4.监听状态变化
	xmlhttp.onreadystatechange = function(){
		/*
		0：请求未初始化
		1：服务器连接已建立
		2：请求已接收
		3：请求处理中
		4：请求已完毕，且响应已就绪
		 */
		if (xmlhttp.readyState === 4) {
			clearInterval(timer);
			//判断是否请求成功
			if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
				//5.处理返回的结果
				success(xmlhttp);
			}else{
				error(xmlhttp);
			}
		}
	}

	//判断是否传入超时时间
	if (timeout) {
		timer = setInterval(function(){
			xmlhttp.abort();//终止请求
			clearInterval(timer);//清除定时器
		},timeout);
	}
}

 

测试：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
	<title>perspective</title>
	<script type="text/javascript" src = "js/ajax.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		var btn = document.querySelector("button");
		btn.onclick = function(){
			ajax("GET","index.php",{
                            "username":"aa",//将要传给服务器的参数放在json对象中
			    "pwd":"123"
			},3000//最长响应时间（等待远程服务器时间）
                        },function(xhr){
				alert(xhr.responseText);
			},function(xhr){
				alert("请求失败.");
			})
		}
	}
	</script>
</head>
<body>
	<button>发送请求</button>
</body>
</html>

index.php

获取数据

<?php
	sleep(5);//判断请求超时
	echo $_GET["username"];
	echo $_GET["pwd"];
?>

 

crystal---
关注
专栏目录
【AJAX 学习笔记】多种方式发送AJAX请求（原生AJAX、jQuery、axios、fetch）
w的博客
08-14 1690
Ajax 学习笔记 1 AJAX相关概述 1.1 AJAX简介 AJAX 全称为Asynchronous JavaScript And XML ，就是异步的 JS 和 XML 。 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 1.2 XML简介 XML 可扩展标记语言。 XML 被设计用来传输和存储数据。（而HTML是用来呈现数据）。 XML 和 HTML 类似，不同的
发送ajax请求
qq_52400625的博客
05-16 484
发送请求的四个步骤 四个步骤 let xhr = new XMLHttpRequest() xhr.open(请求方式,请求地址，是否异步) xhr.send() xhr.onload = function(){} xhr.onreadystate = function(){ if(xhr.readystate===4){ console.log(xhr.responseText) } } ajax的状态码 == 0 表示你创建成功了一个ajax对象 == 1 表示配置请求信息
面试题11：jquery中$.get()提交和$.post()提交有区别吗？
jiangjuanjaun的博客
05-16 6205
相同点：都是异步请求的方式来获取服务端的数据；异同点：1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而P...
【精简版】jQuery 中的 Ajax 详解
最新发布
weixin_46485638的博客
07-15 3539
精简的 jQuery 中的 Ajax 详解。
AJAX发送请求
Guido_GT的专栏
05-13 699
AJAX - 向服务器发送请求 XMLHttpRequest 对象用于和服务器交换数据。 向服务器发送请求 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法： xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); 方法 描述
Ajax发送请求
weixin_49651654的博客
12-16 159
function ajaxRequest() { // 1、我们首先要创建XMLHttpRequest var xmlhttprequest = new XMLHttpRequest(); //2、调用open方法设置请求参数 xmlhttprequest.open(“GET”,“http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax”,true); //4、在send方法前绑定onreadystatechange事
JQuery发送AJAX请求
gcsyzy的博客
04-01 1532
JQuery发送AJAX请求的三种方式：$get()，$post()，$ajax()
ajax发送请求会请求两次,jquery ajax发送请求两次
weixin_42487737的博客
08-05 1210
当我将值发送到处理页面时出现问题 值被多次发送 我在jQuery函数中更改为.on()，但是同一问题 有些运行没有问题，但更新和删除次重复jquery ajax发送请求两次阿贾克斯/* Start Update User From Moadl Bootstrap */$('#EditForm').submit(function(event){var that = $(this),url = tha...
Ajax发送请求js代码
06-23
function getInfo() //发送请求方法，包括请求方法和请求参数以及路径。 { new net.AjaxRequest("Ajaxtest.jsp",deal_getInfo,onerror,"GET"); } function deal_getInfo() //处理请求完成后的方法。 { ...
原生AJAX发送请求2.png
08-06
原生Ajax发送请求原生Ajax发送请求
SpringBoot+SpringSecurity处理Ajax登录请求问题(推荐)
08-28
SpringBoot+SpringSecurity处理Ajax登录请求问题 SpringBoot+SpringSecurity处理Ajax登录请求问题是SpringBoot开发中的一個常见问题，本文将详细介绍如何使用SpringBoot+SpringSecurity处理Ajax登录请求问题。 ...
Ajax发送请求参数详解、form表单Ajax提交及验证
weixin_41519423的博客
12-24 1730
Ajax发送请求详解： (1). url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 (2). type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 (3). timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。 (4). async: ...
AJAX
wjp2960的博客
09-29 160
AJAX简介 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新 回调函数 如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、s...
使用Ajax方式发送请求
you4580的专栏
03-22 313
为异步请求对象添加工作状态监听器，帮助开发人员确认何时从异步请求对象身上得到服务端返回响应数据。通知异步请求对象在工作期间，浏览器是否要等他[同步请求，异步请求]在浏览器内存中，创建一个脚本对象，这个脚本对象就是异步请求对象。通知异步请求对象采用何种方式发送请求协议包。通知异步请求对象本次要访问的资源文件地址。命令通知异步请求对象代替浏览器发送请求。如何命令异步请求对象代替浏览器发送请求。如何为异步请求对象绑定工作监听状态。如何创建一个异步请求对象。如何初始化异步请求对象。创建Ajax核心对象。
什么是Ajax?Ajax如何发送请求（详）
灵魂学者的博客
06-22 1772
什么是Ajax？如何使用Ajax来发送请求？Ajax与传统的Web应用模式有哪些优势？Ajax向服务器发起请求有哪些方法？Ajax如何来处理服务器响应的数据，Ajax处理JSON和XML的数据格式交换以及Ajax的跨域问题等这些内容在本篇内容讲解，超详篇目，对Ajax技术感兴趣的读者可以浏览一下，感谢大家的支持！！！
Ajax发送请求的两种方式
qq_39581763的博客
02-06 323
$.get()：发送get请求 * 语法：$.get(url, [data], [callback], [type]) * 参数： * url：请求路径 * data：请求参数 * callback：回调函数...
如何使用ajax发送请求
04-01
以下是使用Ajax发送请求的基本步骤： 1. 创建XMLHttpRequest对象 在JavaScript中，使用XMLHttpRequest对象来发送HTTP请求。创建XMLHttpRequest对象的代码如下： ``` var xhr = new XMLHttpRequest(); ``` 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值