Ajax请求和Json格式

Ajax请求和Json格式

Ajax请求

1.使用JavaScript的AJax 的get()请求

1. 概念： ASynchronous JavaScript And XML	异步的JavaScript 和 XML
	1. 异步和同步：客户端和服务器端相互通信的基础上
		* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
		* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

		Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
		通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
		传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

		提升用户的体验

2. 实现方式：
	1. 原生的JS实现方式（了解）
				 //1.创建核心对象
	            var xmlhttp;
	          
	                xmlhttp=new XMLHttpRequest();
	          
	            //2. 建立连接
	            /*
	                参数：
	                    1. 请求方式：GET、POST
	                        * get方式，请求参数在URL后边拼接。send方法为空参
	                        * post方式，请求参数在send方法中定义
	                    2. 请求的URL：
	                    3. 同步或异步请求：true（异步）或 false（同步）
	
	             */
	            xmlhttp.open("GET","ajaxServlet?username=tom",true);
	
	            //3.发送请求
	            xmlhttp.send();
	
	            //4.接受并处理来自服务器的响应结果
	            //获取方式 ：xmlhttp.responseText
	            //什么时候获取？当服务器响应成功后再获取
	
	            //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
	            xmlhttp.onreadystatechange=function()
	            {
	                //判断readyState就绪状态是否为4，判断status响应状态码是否为200
	                if (xmlhttp.readyState==4 && xmlhttp.status==200)
	                {
	                   //获取服务器的响应结果
	                    var responseText = xmlhttp.responseText;
	                    alert(responseText);
	                }
	            }

2.使用JavaScript的AJax 的post()请求

AJax发送Post请求
1.需要设置请求头：
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
2.发送时使用send()方法，把请求参数放到send方法中
        xmlHttp.send('name=value&age=12'); //请求体body，用&分隔。
3.示例代码如下：

<script>
	function inser(){
		var uname = document.getElementById("uname").value;
		var contents = document.getElementById("contents").value;
		//1.创建ajax对象
		var ajax = new XMLHttpRequest();
		//2.连接服务器
		ajax.open('post','inser.php',true);
		//3.设置请求头信息
		ajax.setRequestHeader('content-type','application/x-www-form-urlencoded');
		//4.发送请求
		ajax.send('name='+uname+"&contents="+contents);
		/*
		   ajax:接值：
		   1.监听事件：onreadystatechang去监听ajax.readyState什么时候等于4
		   2.判断 ：ajax.readyState==4 ajax.status=200
		   3.接值:ajax.responseText
		*/
		ajax.onreadystatechange = function (){
			if(ajax.readyState==4&&ajax.status==200){
               var c = ajax.responseText;
               if(c=='1'){
               	alert("添加成功");
               }else{
               	alert("添加失败");
               }
			}
		}
	}
</script>

3.JQuery封装后的Ajax

JQeury实现方式
		1. $.ajax()
			* 语法：$.ajax({键值对});
			 //使用$.ajax()发送异步请求
	            $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误，会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });
		2. $.get()：发送get请求
			* 语法：$.get(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型 

		3. $.post()：发送post请求
			* 语法：$.post(url, [data], [callback], [type])
				* 参数：
					* url：请求路径
					* data：请求参数
					* callback：回调函数
					* type：响应结果的类型
					
		4.直接请求JSON数据,post,get请求都可以 $.getJSON(url, [data], [callback])
					* url：请求路径
					* data：请求参数
					* callback：回调函数
		$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});			

JSON对象和JSON字符串

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

最常见的JSON对象：
function Student(name,age){
		this.name=name;
		this.age=age;
		this.eat=function(){
			alert("吃饭")
		}	
	}
	
	var stu=new Student("张三",23);
	alert(stu.name);
	alert(stu.age);
	stu.eat();
	
	var stu2=new Student("李四",24);
	alert(stu2.name);
	alert(stu2.age);
	stu2.eat();

JSON对象的遍历方式

var person = {
	    firstName:"John",
	    lastName:"Doe",
	    age:50,
	    eyeColor:"blue"
	}
	
	//JSON对象的遍历
	for(key in person){
		alert(person[key]);
	}

JSON对象的嵌套

var person={
		"name":"张三",
		"age":20,
		"car":{
			"color":"白色",
			"price":2000
		},
		"arr":[20,30,60,100]
	}
	

JSON对象与JSON字符串的相互转换

注意：JSON字符串，外面用单引号引起来，里面键用双引号引起来。

	var student ='{"name": "张三","age": 24}';
	//JSON字符串转换成JSON对象
	var s=JSON.parse(student);
	alert(s.age);
	
	
	
	//定义JSON对象
	var person = {
		"name": "张三",
		"age": 24
	}
	//JSON对象转换为JSON字符串
	var jsonStr=JSON.stringify(person2);
	alert(jsonStr);