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

目    录

一、原生的Ajax请求

1.异步和同步

2.Ajax介绍

3.实现方式

(1)原生的JS实现方式（了解）

(2)原生AJax发送Post请求，并携带请求参数

二、JQuery封装后的Ajax

1.JQeury实现方式

2. $.get()：发送get请求

3.$.post()：发送post请求

4.直接请求JSON数据,post,get请求都可以 $.getJSON( url，[data]， [callback] ) 

三、 JSONP 跨域请求

1.什么是跨域？

2.JS原生方式的JSONP跨域

2.JQuery 封装过后的JSONP请求

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

四、 CORS 跨域

获取不到数据的原因:

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

2.Java对象转换JSON

(1)使用步骤

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

(3)注解

3. JSON转为Java对象

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

---

一、原生的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{
                    aler