AJAX异步请求(JavaScript、jquery)以及参数携带
AJAX异步请求获取数据
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是一个新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
一、JQuery中的ajax请求。
首先要在JQuery使用ajax需要引入jquery对象此处引入了
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
***1、官网jquery压缩版引用地址***
(3.1.1版本:)
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
3.0.0版本:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
2.1.4版本
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
***2.百度压缩版引用地址:***
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
3.微软压缩版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
注意:不要一味的追求新版本,不是版本越高就越好用,正如jquery-2.0以上版本不再支持IE 6/7/8)
$("#xk").click(function(){
$.ajax({
url:'http://iis6e.cn',//请求的url地址
data:{"name":"小ke同学","qq":1318271717},//请求时携带的参数
type:"GET",//请求方式 POST请求 GET请求
async:true,//是否异步请求,默认是true异步的.这是ajax的特性
//返回的格式也是接受返回的数据格式
//此处注意,你接受的格式要和后端返回的格式一致.否则始终走error
dataType:"text",
success:function(result){//请求成功处理
console.log(result)
},
error:function(er){//请求失败处理
console.log(JSON.stringify(er))
},
complete:function () {
//请求完成处理
}
})
});
二、JavaScript中的ajax请求。
document.getElementById("xke").onclick=function(){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET","http://iis6e.cn",true);
xmlHttp.send();
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
console.log(xmlHttp.responseText)
}
}
}
携带自定义参数值
function ajax() {
var formData = new FormData();
formData.append("id","001");
formData.append("key","value");
let xml = new XMLHttpRequest();
xml.open("POST","http://iis6e.cn",true);
xml.setRequestHeader("Content-type","application/json")
xml.onload=function(){
let result = JSON.parse(xml.responseText);
if(result.code==200){
}
}
xml.send(formData);
}