AJAX如何向服务器发送请求

最新推荐文章于 2024-09-17 14:30:35 发布

待归魔帝

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量3k

点赞数 1

分类专栏： AJAX 文章标签： ajax实例 ajax怎么向服务器发送请求什么是GET什么是POST GET与POST有什么区别什么时候使用POST更好

本文链接：https://blog.csdn.net/ZHJ145236/article/details/78425520

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

 
 如何向服务器发送请求？ 

  其实很简单，AJAX向服务器发送请求其实就是使用了XMLHttpRequest对象中的两个方法 
 Open()方法和Send()方法。对于这两个方法的介绍在我的上一章 
 AJAX基础XMLHttpReqiest中有详细的讲解。 

  例如： 

  xmlhttp.open("GET/POST","myFile.txt",true); 
 //指定和服务器端交互的HTTP方法 

  xmlhttp.send(); 
 //向服务器发出请求，如果采用异步方式，该方法会立即返回。 

  注意：在Open()方法中的第一个参数是指定请求的类型，GET或POST。 

 
 那么GET和POST的区别是什么？什么时候使用POST呢！？ 

 
 区别： 

  1、GET一般用于信息获取，使用URL传递参数，对发送的信息是有量的限制的，一般在2000个字符，而POST一般用于修改服务器的资源，对发送的信息没有限制。 

  2、GET方式需要使用Request.QueryString来获取变量的值，而POST是通过Request.Form来获取变量的值。 

  3、GET是通过地址栏来传值，而POST是通过表单来传值。 

 
 什么时候使用POST？ 

  与POST相比较GET会更简单而且更快。但是如果有以下需求的时候是需要使用POST的。 

  1、更新服务器上的文件或数据库。 

  2、向服务器发送大量的数据。 

  3、发送包含未知字符的用户输入时，POST比GET更稳定也更可靠。 

 
 例如： 

 
 封装ajax传递参数 


  
  
   
   /* + ================ js部分封装 begin ================ +*/
  
  
/*
* + -------------------------------------------------------------------------------------------
* | 函数说明：
* + -------------------------------------------------------------------------------------------
* | ajax 函数名称，可以取任意名称。在ajax这个函数中传递三个参数
* + -------------------------------------------------------------------------------------------
* | url (需要请求的url)
* + -------------------------------------------------------------------------------------------
* | funSucc (当请求成功时需要执行的DOM操作)
* + -------------------------------------------------------------------------------------------
* | funFail (当请求失败的时候需要执行的DOM操作)
* + -------------------------------------------------------------------------------------------
* | open方法 (接收三个必填参数，1.请求方法GET/POST，2.请求页面的url，3.是否执行异步交互)
* + -------------------------------------------------------------------------------------------
* | send方法 (向服务器发出请求，如果采用的是异步方式，该方法会立即返回)
* + -------------------------------------------------------------------------------------------
* | readyState属性 (判断此时浏览器与服务器的状态，值为4时表示完成，即响应数据接收完成)
* + -------------------------------------------------------------------------------------------
* | status属性 (服务器返回的状态，值为200表示成功)
* + -------------------------------------------------------------------------------------------
* | 如果XMLHttpRequest的状态为4且服务器返回的状态码为200的情况下则读取服务器返回的文本信息
* + -------------------------------------------------------------------------------------------
* | 否则弹出错误提示
* + -------------------------------------------------------------------------------------------
*/
function ajax(url,funSucc,funFail){
	var xmlhttp;
	// 1.创建AJAX对象
	if (window.XMLHttpRequest) {
		// 所有现代主流浏览器基本都支持包括IE7+
		xmlhttp = new XMLHttpRequest();
	}else{
		// 主要兼容IE5、IE6
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// 2.连接服务器
	// open(方法，url，异步交互)
	xmlhttp.open("GET", url, true);

	// 3.发送请求
	xmlhttp.send();

	// 4.接收返回的数据
	xmlhttp.onreadystatechange = function ()
	{
		//xmlhttp.readyState 浏览器和服务器，进行到哪一步了
		if(xmlhttp.readyState == 4)	//读取完成
		{
			if(xmlhttp.status == 200)   //成功
			{
				funSucc(xmlhttp.responseText);
			}
			else
			{
				funFail(xmlhttp.status);
			}
		};
	};
};

  
  
   
   /* + ================ js部分封装 end ================ +*/

 
 注意:上面的写法能不能改为下面的写法 

xmlhttp.onreadystatechange = function(){
// xmlhttp.readyState属性判断浏览器和服务器，进行到哪一步了
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
		funSucc(xmlhttp.responseText);
	}else{
		funFail(xmlhttp.status);
	}
};

 
 答案是可以的，但是有点小bug如果我们不需要返回错误处理，也就是不写条件语句中的else语句的话，那么结果没有影响，一样能输出正确的结果但是如果需要错误处理那么就不能够用上面的这种写法，因为在 
  xmlhttp.readyState == 4 && xmlhttp.status == 200 
 的判断过程中，这个期间是有一个过程的  
 readyState 
 属性的值到 4 的时候还需要经过  
 0~3 
  这个过程，也就是说在  
 0~3 
  这个过程中 
 xmlhttp.readyState == 4 && xmlhttp.status == 200 
 是不成立的所以就会执行  
 false也就是else  
 这个语句里面的代码块，但是当  
 readyState 
  的  
 值为4  
 的时候马上又会执行 
  true  
 里面的代码块所以综上考虑最好还是不要用上面的那种写法。也就是在 
 xmlhttp.readyState == 4  
 为true是在进行一次判断，这样就有效避开了 
 0~3 
  的这个过程。 


  
  
   
   /* + ================html部分调用 begin ================ +*/
  
  
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ajax实例</title>
<script type="text/javascript" src="./js/newajax.js"></script>
</head>
<body>
<p id="op"></p>
<button id="btn">点击</button>
<script type="text/javascript">
function myFunction(clickBtn)
{
	var oBtn = document.getElementById(clickBtn);
	oBtn.onclick = function()
	{
		ajax("ajax.txt",function(sucInfo)
		{
			document.write(sucInfo);
		}
		,function(sucInfo)
		{
			console.log(sucInfo);
		});
	};
};
myFunction("btn");
</script>
</body>
</html>

  
  
   
   /* + ================html部分调用 end ================ +*/

如有理解不当之处，欢迎各位老铁留言指正。谢谢！！！！