深入理解Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43050847/article/details/105667403

文章目录

ajax概述

Asynchronous Javascript And XML(异步js和xml)，是一种创建交互式网页应用的网页开发技术。
使用ajax可以实现页面的部分更新，用户感受更快更好。

ajax由js编写，使用XMLHttpRequest 对象对数据收发进行封装，
发送ajax请求时，ajax会要求调用方（浏览器）开启新线程向服务器进行请求，并对响应的结果进行反复读取，当读取到特定状态后，停止反复读取。读取过程中会把需要运行的js（回调函数）添加入js的执行队列（js执行引擎为单线程），js执行引擎按队列顺序执行。

XMLHttpRequest对象属性

属性onreadystatechange
- 用于绑定回调函数，当服务器响应数据回来，我们可以在指定的回调函数中进行数据处理。
属性readyState
- HTTP请求的状态：当一个XMLHttpRequest初次创建的时候，这个属性值从0开始，直到接收到完整的HTTP响应，这个值增加到4。
属性status
- 描述HTTP的状态码。
属性responseText和responseXML
- 获取服务器响应信息。

XMLHttpRequest对象常用方法

open（）：用于设置请求方式、url以及是否异步。
- 参数1：HTTP请求方式POST/GET；
- 参数2：url路径；
- 参数3：true/false代表是否异步。
send（）：真正向服务器发送请求。
- send 的参数只在post请求方式时使用。
setRequestHeader（）
- 如果请求方式是POST，那么在使用时必须设置请求头（form表单enctype的默认值）。

原生ajax代码步骤

    <script>
        //原生ajax调用过程
        function myAjaxReq(){
            //创建核心对象 XMLHttpRequest
            var xmlhttp;
            if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else{// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //回调函数 当请求正常返回时 用js操作页面
            xmlhttp.onreadystatechange=function(){
                //readyState ajax请求的状态 4代表请求发送完成
                //status     http的状态    200代表正确返回
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    console.log(xmlhttp.responseText);
                   document.getElementById("showSpan").innerHTML=xmlhttp.responseText;
                }
            }
            //设置请求的地址 方式 是否使用异步
            xmlhttp.open("get","testAjax?uname="+document.getElementById("uname").value,true);
            //设置请求头
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //设置发送的参数
            xmlhttp.send();
        }
    </script>

jQuertAjax开发

$.post/ $.get针对于POST/GET请求，格式（四个参数）：
- url：发送请求地址
- data：待发送key/value参数
- callback：发送成功时回调函数
- type：返回内容格式，xml/html/script/json/text等
json：一种轻量级的数据交换格式。简单说就是javascript中的对象和数组，且两种格式可以互相嵌套。
- fastjson：将java对象转换成json数据，是阿里提供的一个开源json插件，需导入jar包。
  - String json = JSONObject.toJsonString(java对象，其他参数)；
  - 获得部分属性（指定一个filter）：
    - SerializeFilter filter = new SimplePropertyPreFilter(“需要的属性1”，“需要的属性2”…)
  - 同一对象循环引用问题（设置常量取消循环引用）:
  - String json = JSONObject.toJsonString(java对象，SerializerFeature.DisableCricularReferenceDetect)；

jQuery封装的ajax请求

//jquery封装的ajax请求
//通过json格式设置参数
$.ajax({
	url:"ajaxServlet",//地址
	type:"post",//请求类型
	data:{"uname":$("#username").val()}, //请求的参数 常用json格式
	dataType:"text",//返回数据的类型
	success:function(data){//响应成功时的回调函数 data表示返回的数据
		console.log(data);
	}
});

简化写法

$.post("/day6/testAjax",
	   {"uname":$("#uname").val()},
	   function(data){
	   $("#showSpan").html(data);
	   },"text");

Ajax跨域问题

什么是跨域
- 不同服务器端的资源访问，当协议、域名、端口号任意一个不同，他们就是不同的域。
- 正常情况下，因为浏览器安全问题，不同域的资源是不可以访问的。
跨域解决方案
代理方案。前端页面访问本地服务器，本地服务器访问其他域的资源，是服务器端的跨域问题解决。
JSONP（JSON with Padding）。是JSON的一种“使用模式”，利用< script >标签的开放策略。
XHR2（XMLHttpRequest Level2）。是H5中提供的方法，一般在移动开发中使用。

$.getJSON解决跨域问题

$ .getJSON就是$ .ajax解决跨域问题的简化操作。
在这里插入图片描述

没有参数就不写了。
代码实现注意事项：
- url传callback参数
- 服务器端接收参数，底层生成随机数
- 回写用callback（json）的格式。