AJAX异步请求（JavaScriptjquery）以及参数携带

Posted 2021-04-08 小ke同学

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);}