-
ajax异步请求
2016-05-24 05:47:15ajax异步请求 -
Ajax异步请求
2014-03-26 11:10:38Ajax异步请求!PRIVATE。 -
AJAX异步请求
2019-06-25 22:35:51在JavaScript中,通过AJAX可以发出异步请求,即由子线程发出请求,且将由子线程获取响应结果,则主线程可以不参与,表现为浏览器中显示的页面内容可以不发生变化。 基于jQuery的AJAX访问,可以调用jQuery中的$.ajax...Ajax即:Asynchronous JavaScript And XML(异步JavaScript和XML)。
在JavaScript中,通过AJAX可以发出异步请求,即由子线程发出请求,且将由子线程获取响应结果,则主线程可以不参与,表现为浏览器中显示的页面内容可以不发生变化。
基于jQuery的AJAX访问,可以调用jQuery中的$.ajax()函数,该函数的参数是一个JSON对象,需要至少为该JSON对象配置5个属性:
<script type="text/javascript"> $("#btn-reg").click(function(){ // url:将请求提交到哪里去 // data:请求参数 // type:请求方式,例如GET或POST等 // dataType:服务器端响应的数据类型,取值可以是json、text、xml等,取决于服务器端响应时的响应头中的Content-Type // success:响应成功时(Http响应码是200)的回调(callback)函数,函数中的参数就是服务器端响应的JSON数据形成的JSON对象 // error: 响应失败时的回调函数(Http响应码不是200的情况) $.ajax({ "url":"user/handle_register.do", "data":$("#form-reg").serialize(),//序列化表单值:"username=Hello&password=123456" "type":"post", "dataType":"json", "success":function(obj) { if (obj.state == 0) { alert(obj.message); } else { alert("注册成功!"); } }, "error":function(obj) { } }); }); </script>
JSON类型
JSON数据中,整个数据是一个**JSON对象**,对象中可以有多组**属性与值**的配置,各组之间使用逗号(`,`)进行分隔,而**属性名称**与**属性值**之间使用冒号(`:`)进行分隔,**属性名称**是字符串类型的数据,需使用一对引号框住,**属性值**可以是任意数据类型,如果是数值型或布尔型,可以直接写,不需要使用引号,如果是字符串类型,则需要使用引号框住。
JSON数据是在JavaScript语言中可以直接识别的数据类型,无需使用任何解析技术:
<script type="text/javascript"> var data = { "username":"root", "age":25, "phone":"13800138001", "email":"root@163.com" }; console.log("username=" + data.username); console.log("age=" + data.age); console.log("phone=" + data.phone); console.log("email=" + data.email); </script>
在JSON数据中,每个属性的值还可以是另一个JSON对象,另外,在JSON中也有**数组**的概念,每个属性的值都可以是一个数组,例如:
{ "username":"root", "age":25, "phone":"13800138001", "email":"root@163.com", "department":{ "id":3, "name":"RD" }, "skill":["Java","MySQL","SSM"] } //可以通过下标访问数组元素 console.log("skill-1=" + data.skill[0]); console.log("skill-2=" + data.skill[1]); console.log("skill-3=" + data.skill[2]);
在JSON的数组其实也是相对于JavaScript这门语言的数组,所以,某个属性是数组类型,对于JavaScript语言来说,就是一个数组,也是有`length`属性的,所以,在操作数组类型的数据时,也可以进行循环或遍历:
for (var i = 0; i < data.skill.length; i++) { console.log("skill[" + i + "]=" + data.skill[i]); }
可以通过`JSON.parse(str)`将字符串转换为JSON对象,例如:
var str = '{"username":"admin","password":"123456","age":28}' var data = JSON.parse(str);
服务器端向客户端响应JSON格式的数据
当服务器处理请求的方法添加了`@ResponseBody`注解后,表示响应正文,且返回值类型是`String`时,会将方法返回值中的字符串响应给客户端,但是,默认的响应头中的配置是:Content-Type: text/html;charset=ISO-8859-1 所以,默认的响应方式是不支持中文的!
正确的做法是自定义某个类型,用于表示所需要响应的数据内容:
public class JsonResult<T> { // 操作状态,即成功或失败 private Integer state; // 操作失败时的提示消息 private String message; // 响应给客户端的数据 private T data; }
当创建对象并为属性赋值后,表示将响应的JSON数据例如:
{"state":0,"message":"xxx","data":xxx}
使用这种响应结果时,必须添加Jackson依赖:
<dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.8</version> </dependency>
在使用之前,还应该在Spring的配置文件中配置注解驱动:
<!-- 注解驱动 --> <mvc:annotation-driven />
该框架的作用就是将返回的对象组织成JSON格式,并将响应头中的`Content-Type`进行设置:
Content-Type: application/json;charset=UTF-8
在应用时,将控制器中处理请求的方法的返回值设置为`JsonResult`类型,并返回该类型的对象即可,最终,客户端就会收到与返回对象相匹配的JSON字符串,例如:
{"state":1,"message":"注册成功","data":null}
之所以将Jackson依赖添加到项目中就可以直接使用,是因为:当响应正文时,SpringMVC框架会根据匹配的转换器(Converter)将方法的返回值转换为响应的正文,并决定响应头的相关信息,在SpringMVC使用Converter时有一定的优先级,例如当方法的返回值是`String`时,优先级是较高的,会自动使用`StringHttpMessageConverter`转换器,当添加了Jackson依赖时,凡是返回值类型是SpringMVC默认不支持的,就会自动应用Jackson中的转换器,而Jackson中的转换器主要就设置了响应头中的`Content-Type`及将返回的对象转换为JSON格式。
-
AJAX异步请求(C#、JAVA)、HTMl ajax异步请求数据(JQuery异步请求ajax,JavaScript异步请求ajax)
2019-11-08 15:19:41AJAX异步请求获取数据 ** AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与...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>
此处写出一些常用的在线引入JS文件的地址
***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:'https://baidu.com',//请求的url地址 data:{"name":"张三","tel":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","https://baidu.com",true); xmlHttp.send(); xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4&&xmlHttp.status==200){ console.log(xmlHttp.responseText) } } }
于2020-03-28 更新
function ajax() { var formData = new FormData(); formData.append("id","001"); formData.append("key","value"); let xml = new XMLHttpRequest(); xml.open("POST","https://baidu.com",true); xml.setRequestHeader("Content-type","application/json") xml.onload=function(){ let result = JSON.parse(xml.responseText); if(result.code==200){ } } xml.send(formData); }
-
ajax异步请求详解
2020-08-31 18:03:54做前端开发的朋友对于ajax异步更新一定印象深刻,本文主要介绍了关于ajax异步请求的那点事,具有一定的参考价值,下面跟着小编一起来看下吧 -
ajax异步请求刷新
2020-10-21 18:12:57ajax刷新是一种用户体验良好的刷新方式,这篇文章主要介绍了ajax异步请求刷新,感兴趣的小伙伴们可以参考一下