Ajax异步请求-GET和POST

最新推荐文章于 2023-05-06 15:02:09 发布

种下星星的日子

最新推荐文章于 2023-05-06 15:02:09 发布

阅读量873

点赞数 2

分类专栏：【Web前端】

本文链接：https://blog.csdn.net/hongwei15732623364/article/details/53434995

版权

【Web前端】专栏收录该内容

21 篇文章 1 订阅

订阅专栏

Ajax异步请求

一、整体概览：

二、异步请求有五步：

1.创建XMLHttpRequest对象

2.注册回调方法

3.设置和服务器端交互的相关参数

4.设置向服务器端发送的数据，启动和服务器端的交互

5.回调判断

三、GET与POST请求：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		var xmlhttp;
			function submit(){
				//1.创建XMLHttpRequest对象
				if(window.XMLHttpRequest){
					xmlhttp = new XMLHttpRequest();
					if(xmlhttp.overrideMimeType){
						xmlhttp.overrideMimeType("text/xml");
					}				
				}else if(window.ActiveXObject){
					//IE6，IE5，IE5.5
					var activexName = ["MSXML 2.XMLHTTP.6.0","MSXML 2.XMLHTTP.5.0","MSXML 2.XMLHTTP.4.0","MSXML 2.XMLHTTP.3.0","MSXML 2.XMLHTTP","Microsoft.XMLHTTP"];
					for(var i = 0; i< activexName.length; i++){
						try{
							var xmlhttp = new ActiveXObject(activexName[i]);
							break;
						}catch(e){
							
						}
					}
				}
				if(xmlhttp == undefined || xmlhttp == null){
					alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
					return;
				}				
				
				//2.注册回调方法
				xmlhttp.onreadystatechange = callback;
				
				//如何从文本框获取值--固定用法
				var userName = document.getElementById("UserName").value;
				
				/*
				 * GET交互方式
				//3.设置和服务器端交互的相应参数
				xmlhttp.open("GET","AJAX?name=" + userName,true);
				//4.设置向服务器端发送的数据，启动和服务器端的交互
				xmlhttp.send(null);
				*/
				
				//POST交互方式
				//3.设置和服务器端交互的相应参数
				xmlhttp.open("POST","AJAX",true);
				
				//POST方式交互所需要增加的代码
				xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
				
				//4.设置向服务器端发送的数据，启动和服务器端的交互
				xmlhttp.send("name=" + userName);
			}
			
			function callback(){
				//5.判断服务器端交互是否完成，判断服务器端是否正确返回了数据
				if(xmlhttp.readyState == 4){
					//表示和服务器端的交互已经完成
					if(xmlhttp.status == 200){
						//表示服务器端响应代码是200，正确返回了数据
						//纯文本数据的接受方法
						var message = xmlhttp.responseText;
						
						//向div标签中填充文本内容的方法
						var div = document.getElementById("message");
						div.innerHTML = message;
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="UserName" value="123"/>
		<input type="button" οnclick="submit()" value="校验用户名" />
		<br />
		<div id="message"></div>
	</body>
</html>

注意：

1.不同浏览器建立该对象的方式不同：IE7，IE8，FireFox等直接newXMLHttpRequest()；IE6，IE5.5，IE5：通过ActiveXObject控件的名称通过newActiveXObject()方式。