My website: welcome to visit Austria
Ajax&Json
Ajax
concept
That AJAX Asynchronous Javascript And XML (Asynchronous JavaScript and XML), is to improve the user experience of web development technology
effect
Improve transmission efficiency, improve the user experience
Reducing the data transfer between the server and the browser
substance
Ajax asynchronous requests sent by the Object Browser
Get Ajax object, Ajax is not standardized, it is necessary to distinguish the browser
Synchronous and asynchronous interaction
Synchronize
Synchronization can be understood as after performing a function or method, has been waiting for the system to return value or message, then the program is blocked out and only receives the value of the returned message or other commands before execution down
Corresponds to the browser sends a request to the server, and then waits until the request-response operation performed after
asynchronous
Asynchronous request, send the request of colleagues can continue to operate page. Page does not destroy;
Return part of the data, reduce unnecessary data transmission bearing, introduction of network resources. Page does not refresh, but part of the data update page
Corresponds to the browser sends a request to the server, but also can continue to perform following operations without waiting
Intuitive point
Sync: You finish first result I do, after the step of the operation must wait before the step operation
Asynchronous: each do not interfere with each of (high-efficiency)
Gets the Ajax object
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){//针对其他浏览器
xhr = new XMLHttpRequest();
}else{//针对低版本的ie浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
Ajax sends a request
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form enctype="application/x-www-form-urlencoded">
<input /> <input /> <input type="submit" />
<br/>
<input type="button" onclick="randomData()" value="获取随机数"/>
</form>
<script type="text/javascript">
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
return xhr;
}
//get方式请求
/* var xhr = getXhr();//获取ajax对象
xhr.open("get","ajaxGet?name=fueen");
xhr.send(null);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){//200表示请求成功
var json = JSON.parse(xhr.responseText);//解析接收到的Json对象
alert(json.inputdate);//打印inputdate值
//alert(xhr.responseText);
}
} */
//post方式请求
function randomData(){
var xhr = getXhr();//获取Ajax对象
var name="冲冲冲";
xhr.open("post","ajaxPost");//设置请求方式和请求地址
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("username="+name);
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
}
</script>
</body>
</html>
Json
Brief introduction
JSON: JavaScript Object Notation (JavaScript Object Notation)
JSON syntax for storing and exchanging text messages. Similarly XML
JSON is smaller than XML, faster and easier to parse
Java object into a Json objects
@Controller
public class JsonController {
@ResponseBody //加入注解将返回值类型转为json
@RequestMapping("/json")
public List<User> json(Model model) {
System.out.println("json来咯");
User user1 = new User("曾经沧海难为水","乌斯怀亚的灯塔");
User user2 = new User("布宜诺斯艾利斯的海岸","伊瓜苏瀑布");
List<User> list = new ArrayList<User>();
list.add(user1);
list.add(user2);
return list;
//model.addAttribute("json", list);
//return "jsp/json";
}
}
Parse Json objects
The method of converting native JS
var json = JSON.parse(xhr.responseText);//解析接收到的Json对象
alert(json.inputdate);//打印Json中inputdate的值
