精华内容
下载资源
问答
  • ajax异步请求

    2016-05-24 05:47:15
    ajax异步请求
  • Ajax异步请求

    2014-03-26 11:10:38
    Ajax异步请求!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异步请求获取数据 ** 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:57
    ajax刷新是一种用户体验良好的刷新方式,这篇文章主要介绍了ajax异步请求刷新,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,111
精华内容 7,244
关键字:

ajax异步请求