一、原生的Ajax请求

1.异步和同步

异步和同步都是发生在客户端和服务器端相互通信的基础上。

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

2.Ajax介绍

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

3.实现方式

(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)原生AJax发送Post请求，并携带请求参数

设置请求头
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencodee");
发送是使用send()方法，把请求参数放到send方法中
xmlHttp.send('name=value&age=12'); //请求体body,用&分隔

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

}
</script>

二、JQuery封装后的Ajax

1.JQeury实现方式

$.ajax() ---> 语法：$.ajax({键值对});

$.ajax({
    url:"ajaxServlet1111",                //请求路径
    type:"POST",                          //请求方式
    data:{"username":"jack","age":23},    //请求参数
    success:function(data){
        alert(data);                      //响应成功后的回调函数
    },
    error:function(data){
        alert("出错啦...");                //表示如果请求响应出现错误，会执行的回调函数         
    },
    dataType:"json"                       //设置接受到的响应数据的格式
});

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

三、 JSONP 跨域请求

1.什么是跨域？

现代浏览器为了安全，做了一个同源限制。跨域指的是A网站内部向B网站发送一个AJAX请求。由于浏览器有同源策略的限制，默认情况下，是不允许 A网站向 B 网站请求数据资源的。具体来说,凡是发送请求中，协议、主机名、端口号有一个不同，即为跨域请求。为了能利用访问其他网站的资源，就可以利用jsonp以及CORS来跨域。

2.JS原生方式的JSONP跨域

JSONP 跨域的原理，就是利用某些标签，跨域请求时，不受同源策略的限制比如 script、img等。JSONP 跨域跟XMLHttpRequest 异步请求对象没关系并且JSONP只支持GET请求。

<script type="text/javascript">
			//获取后台响应数据的回调函数名
			function getJsonData(res){
				alert(res.catName);
			}
	</script>
		<script src="https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=getJsonData"></script>
//注意：回调函数的script标签定义在 请求接口的script标签的前面						
/* 
		说明：
		callback=getJsonData  告诉服务器，前台的一个接受后台响应数据时的一个回调函数名
		
		{"username":"zhangsan","password":"******"}
		响应： "getJsData({"username":"zhangsan","password":"******"})"
		后台JSON方式响应的数据 把JSON数据塞入回调函数中 统一返回
		getJsonData({
		    mts:'1325914',
		    province:'陕西',
		    catName:'中国联通',
		    telString:'13259141515',
			areaVid:'30503',
			ispVid:'137815084',
			carrier:'陕西联通'
		})
*/

2.JQuery 封装过后的JSONP请求

$ajax({
    type:"GET",
    url:"https://tcc.taobao.com/cc/json/mobile_tel_segment.html",
    data:{tel:"13259141515"},
    jsonp:"callback",                //jsonp请求，回调函数名Jquery会自动生成
    success:function(res){
        alert(res.catName);
    },
    dataType:"json"
});

3.$.getJSON() 方法简化 jsonp 请求

$.getJSON("https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=13259141515&callback=?",function(res){
				alert(res.catName);
			});

Jquery还有简化的JSONP请求
getJSON() 他可以判断你是跨域请求，还是非跨域请求，都能处理
callback=? 回调函数名给个？让Jquery随机生成一个回调函数名

四、 CORS 跨域

浏览器在检测到你发送的 ajax 请求不是同源请求时,会自动在 http 的头部添加一个 origin 字段.请求头：Origin:http://localhost:8080

获取不到数据的原因:

这是一次跨域请求.
请求确实发送到服务器了.
服务器也把数据返回到了浏览器.
但是服务器返回的响应头里,没有告诉浏览器哪个域名可以访问这些数据(也就是没有设置 Access-Control-Allow-Origin)
于是浏览器就把这个数据丢弃了.我们也就无法获取到这个数据.

这个时候,只需要后台在相应头里加上一个 Access-Control-Allow-Origin:* 即可完成跨域数据获取。

//后台Java代码
response.setHeader("Access-Control-Allow-Origin", "*");

五、Java中JSON字符串和Java对象的互相转换

1.常见的JSON解析器有：Jsonlib，Gson，fastjson，jackson

2.Java对象转换JSON

(1)使用步骤

导入jackson的相关jar包
创建Jackson核心对象 ObjectMapper
调用ObjectMapper的相关方法进行转换

(2)转换方法：writeValue(参数1，obj) 或 writeValueAsString(obj):将对象转为json字符串

参数1：

File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中

(3)注解

@JsonIgnore：排除某个属性不要转换成JSON,给类的属性上加上这个注解。
@JsonFormat：属性值得格式化日期字符串，取的是默认时区的时间

@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
						   
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")//给默认时区加上8个小时

@JsonProperty("username") ：指定转换json字符串是的别名

@JsonProperty("username")
private String name;

@JsonInclude(JsonInclude.Include.NON_NULL) ：如果该字段的值是null,就不会转换成JSON

@JsonInclude(JsonInclude.Include.NON_NULL) 
private Long num; //null

@JsonInclude(JsonInclude.Include.NON_EMPTY)：该集合长度为0或为null，就不会转换成JSON

@JsonInclude(JsonInclude.Include.NON_EMPTY) 
private List<String> list;

3. JSON转为Java对象

(1)使用步骤

导入jackson的相关jar包
创建Jackson核心对象 ObjectMapper
调用ObjectMapper的相关方法进行转换

(2)转换方法：readValue(json字符串数据,Class)

(小编也在努力学习更多哟!以后再慢慢分享的啦!)

希望对友友们有所帮助!!!!

✿✿✿JavaScript --- Ajax异步请求与JSONP 跨域请求

目 录