JS，Jquery发起ajax的方式总结

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_31279347/article/details/83862742

JS中有两种发起ajax的方式：

• GET方式:

<script type="text/javascript">
		var ajaxObj = new XMLHttpRequest();
		ajaxObj.open("GET", "selectProvice?id=1");
		ajaxObj.send()
		ajaxObj.onreadystatechange = function() {
			if (ajaxObj.readyState === 4 && ajaxObj.status) {
				alert("发送成功");
			}
		}
	</script>

• POST方式：

<script type="text/javascript">
		var ajaxObj=new XMLHttpRequest();
		ajaxObj.open("POST","selectProvice?id=1");
		ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		// multipart/form-data 默认的以二进制方式传送
		ajaxObj.send(null);
		ajaxObj.onreadystatechange= function ()
		if(ajaxObj.readyState===4&&ajaxObj.status===200){
		alert("发送数据成功");
		}
	}
</script>

• ajax获取从服务器返回的数据是 ajaxObj.responseText获取
• ajax 给服务器发送数据: get post
• get: url重写(拼接) ---- 数据量小 简单数据 不安全
• post:send(数据) 请求体(页面看不到) 数据量大 简单或复杂数据 安全
• application/x-www-form-urlencoded表示表单默认以字符串的形式发送
• multipart/form-data 表单数据以二进制流的方式发送
• ajaxObj.setRequestHeader其实就是修改请求头(请求报文)里面的额Content-type值

---

Jquery有三种发起ajax的方式：

jquery 提供了三种 ajax 请求的函数，分别为： $.ajax() , $.get() , $.post() ，下面是一个 jquery 实现ajax

• get方式

<script type="text/javascript">
	$(function(){
		$.ajax({
			url : "AjaxJson",	//请求url
			type : "POST",	//请求类型  post|get
		 // data : "key=value&key1=value2",	//后台用 request.getParameter("key");
			dataType : "json",  //返回数据的 类型 text|json|html--
			success : function(users){	//回调函数 和 后台返回的 数据
			//	var users = JSON.parse(data);
				var tBody = $("#tbBody");
				for(var i=0; i<users.length; i++){  //通过遍历，创建行数据
					var tr = $("<tr><td>"+users[i].id+"</td><td>"+users[i].name+"</td><td>"+users[i].school+"</td></tr>")
					tBody.append(tr);
				}
			}
		});
	});

</script>

• get方式

	$.get(url,data,callback,type); 
	// data为 发送的数据  {key:value}形式 ， 
	//	callback成功时的回调函数 function(result){}  result 后台返回的数据
	// type  返回的数据类型  默认为 text ,可以设为 json text 
例子：
$.post("url",{name:"小钱",age:"20"},function(date,Status){
　　　if(Status=="success")
　　　　  {
　　　　　alert("成功");
　　　　   }
　　　　});

• post方式

	$.post(url,data,callback,type);

参考来源：
https://blog.csdn.net/dadadashixiong/article/details/78878247
https://blog.csdn.net/qq_37176126/article/details/73277972