AJAX【AJAX实现省市联动、AJAX跨域问题、AJAX实现搜索联想自动补全、附录：HTTP状态信息】

最新推荐文章于 2023-07-09 18:52:27 发布

tuanliang

最新推荐文章于 2023-07-09 18:52:27 发布

阅读量201

点赞数 1

分类专栏： Javascript 文章标签： ajax http 前端

本文链接：https://blog.csdn.net/m0_52896752/article/details/127627853

版权

Javascript 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

AJAX

AJAX实现省市联动

什么是省市联动？
- 在网页上，选择对应的省份之后，动态的关联出该省份对应的市。选择对应的市之后，动态的关联出该市对应的区。（首先要清楚需求）

进行数据库表的设计

t_area （区域表）
id(PK-自增)	  code		name		pcode
---------------------------------------------
1				001		 河北省		null
2				002		 河南省		null
3				003		 石家庄	    001
4				004		 邯郸			 001
5				005		 郑州			 002
6				006		 洛阳			 002
7				007		 丛台区	    004  

将全国所有的省、市、区、县等信息都存储到一张表当中。
采用的存储方式实际上是code pcode形势。

建表t_area，模拟好数据。
首先实现第一个功能：
- 页面加载完毕之后，先把省份全部展现出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
</head>
<body>

<!--引入我们自己编写的jQuery库-->
<script type="text/javascript" src="/ajax/js/jQuery-1.0.0.js"></script>

<script type="text/javascript">
    $(function(){
        // 发送ajax请求，获取所有的省份。省份的pcode是null
        $.ajax({
            type : "get",
            url : "/ajax/listArea",
            data : "t=" + new Date().getTime(),
            async : true,
            success : function(jsonArr){
                // [{"code":"001", "name":"河北省"},{"code":"002", "name":"河南省"}]
                // 以上格式的json是我们自己设计出来的，希望服务器能够给我们返回这样一个json格式的字符串。
                var html = "<option value=''>--请选择省份--</option>";
                for (var i = 0; i < jsonArr.length; i++) {
                    var area = jsonArr[i]
                    html += "<option value='"+area.code+"'>"+area.name+"</option>"
                }
                $("#province").html(html)
            }
        })

        // 只要change发生，就发送ajax请求
        $("#province").change(function(){
            //alert("发送ajax请求")
            //alert(this)
            //alert(this.value)

            // 发送ajax请求
            $.ajax({
                type : "get",
                url : "/ajax/listArea",
                data : "t=" + new Date().getTime() + "&pcode=" + this.value,//this.value指的是001，002
                async : true,
                success : function(jsonArr){
                    // [{"code":"006", "name":"XXX"},{"code":"008", "name":"YYYY"}]
                    var html = "<option value=''>--请选择市--</option>";
                    for (var i = 0; i < jsonArr.length; i++) {
                        var area = jsonArr[i]
                        html += "<option value='"+area.code+"'>"+area.name+"</option>"
                    }
                    $("#city").html(html)
                }
            })
        })
    })
</script>

<select id="province">
    <!--<option value="">&#45;&#45;请选择省份&#45;&#45;</option>
    <option value="001">河北省</option>
    <option value="002">河南省</option>-->
</select>

<select id="city"></select>

</body>
</html>

AJAX跨域问题

跨域

跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(https://baidu.com)页面去请求京东(https://www.jd.com)的资源。
通过超链接或者form表单提交或者window.location.href的方式进行跨域是不存在问题的（大家可以编写程序测试一下）。但在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。
同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性，同源就是协议、域名和端口都相同。
同源策略有什么用？如果你刚刚在网银输入账号密码，查看了自己还有1万块钱，紧接着访问一些不规矩的网站，这个网站可以访问刚刚的网银站点，并且获取账号密码，那后果可想而知。所以，从安全的角度来讲，同源策略是有利于保护网站信息的。
有一些情况下，我们是需要使用ajax进行跨域访问的。比如某公司的A页面(a.bjpowernode.com)有可能需要获取B页面(b.bjpowernode.com)。

同源还是不同源

区分同源和不同源的三要素
- 协议
- 域名
- 端口
协议一致，域名一致，端口号一致，三个要素都一致，才是同源，其它一律都是不同源

URL1	URL2	是否同源	描述
http://localhost:8080/a/index.html	http://localhost:8080/a/first	同源	协议域名端口一致
http://localhost:8080/a/index.html	http://localhost:8080/b/first	同源	协议域名端口一致
http://www.myweb.com:8080/a.js	https://www.myweb.com:8080/b.js	不同源	协议不同
http://www.myweb.com:8080/a.js	http://www.myweb.com:8081/b.js	不同源	端口不同
http://www.myweb.com/a.js	http://www.myweb2.com/b.js	不同源	域名不同
http://www.myweb.com/a.js	http://crm.myweb.com/b.js	不同源	子域名不同

复现AJAX跨域问题

AJAX跨域解决方案

方案1：设置响应头

核心原理：跨域访问的资源允许你跨域访问。

实现：

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个
response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有

方案2：jsonp

jsonp：json with padding（带填充的json【学完之后再理解这个什么意思！！！】）
jsonp不是一个真正的ajax请求。只不过可以完成ajax的局部刷新效果。可以说jsonp是一种类ajax请求的机制。
jsonp不是ajax请求，但是可以完成局部刷新的效果，并且可以解决跨域问题。
注意：jsonp解决跨域的时候，只支持GET请求。不支持post请求。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonp跨域</title>
</head>
<body>

<!--<script type="text/javascript" src="http://localhost:8081/b/jsonp2?fun=sayHello"></script>-->

<script type="text/javascript">
  // 自定义的函数
  function sayHello(data){ // data是一个json：{"username" : "lucy"}
    document.getElementById("mydiv").innerHTML = data.username
  }

  window.onload = () => {
    document.getElementById("btn").onclick = () => {
      // 加载script元素
      // 创建script元素对象
      const htmlScriptElement = document.createElement("script");
      // 设置script的type属性
      htmlScriptElement.type = "text/javascript"
      // 设置script的src属性
      htmlScriptElement.src = "http://localhost:8081/b/jsonp2?fun=sayHello"
      // 将script对象添加到body标签中（这一步就是加载script）
      document.getElementsByTagName("body")[0].appendChild(htmlScriptElement)
    }
  }
</script>

<button id="btn">jsonp解决跨域问题，达到ajax局部刷新的效果</button>

<div id="mydiv"></div>

</body>
</html>

方案3：jQuery封装的jsonp

牛人们写的jQuery库，已经对jsonp进行了封装。大家可以直接拿来用。
用之前需要引入jQuery库的js文件。（这里的jQuery库咱们就不再封装了，咱们直接用jQuery写好的jsonp方式。）
jQuery中的jsonp其实就是我们方案2的高度封装，底层原理完全相同。

核心代码

$.ajax({
    type : "GET",//jsonp只支持get
    url : "跨域的url",
    dataType : "jsonp", // 指定数据类型
    jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
    jsonpCallback : "sayHello" // 指定回调函数的名字
							   // （不设置的时候，jQuery会自动生成一个随机的回调函数，
    						   //并且这个回调函数还会自动调用success的回调函数。）
})

@WebServlet("/jsonp3")
public class JSONPServlet3 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        // 获取函数名
        //String callback = request.getParameter("callback");
        String callback = request.getParameter("fun");

        // 响应一段js代码，调用函数
        response.getWriter().print(callback + "({\"username\":\"lisi\"})");
    }
}

方案4：代理机制（httpclient）

使用Java程序怎么去发送get/post请求呢？【GET和POST请求就是HTTP请求。】
- 第一种方案：使用JDK内置的API（java.net.URL…），这些API是可以发送HTTP请求的。
- 第二种方案：使用第三方的开源组件，比如：apache的httpclient组件。（httpclient组件是开源免费的，可以直接用）
在java程序中，使用httpclient组件可以发送http请求。
- 对于httpclient组件的代码，大家目前可以不进行深入的研究，可以从网上直接搜。然后粘贴过来，改一改，看看能不能完成发送get和post请求。
- 使用httpclient组件，需要先将这个组件相关的jar包引入到项目当中。

方案5：nginx反向代理

nginx反向代理中也是使用了这种代理机制来完成AJAX的跨域，实现起来非常简单，只要修改一个nginx的配置即可。以后大家学习nginx之后再说吧。！！！！

AJAX实现搜索联想自动补全

什么是搜索联想？自动补全？
- 百度是一个很典型的代表。在百度的搜索框中输入相关信息的时候，会有搜索联想以及自动补全。
- 搜索联想和自动补全：实际上是为了方便用户的使用。让用户的体验更好。
- 搜索联想：当用户输入一些单词之后，自动联想出用户要搜索的信息，给一个提示。
- 自动补全：当联想出一些内容之后，用户点击某个联想的单词，然后将这个单词自动补全到搜索框当中。
- 搜索联想和自动补全功能，因为是页面局部刷新效果，所以需要使用ajax请求来完成。
搜索联想，自动补全功能的核心实现原理？
- 当键盘事件发生之后，比如：keyup：键弹起事件。
- 发送ajax请求，请求中提交用户输入的搜索内容，例如：北京（发送ajax请求，携带“北京”两个字）
- 后端接收到ajax请求，接收到“北京”两个字，执行select语句进行模糊查询。返回查询结果。
- 将查询结果封装成json格式的字符串，将json格式的字符串响应到前端。
- 前端接收到json格式的字符串之后，解析这个json字符串，动态展示页面。


<script type="text/javascript">
    /*不使用jQuery，也不使用我们自己写的jQuery库。使用原生的ajax实现搜索联想和自动补全。*/
    window.onload = () => {
        document.getElementById("keywords").onkeyup = function(){
            if (this.value == "") {
                document.getElementById("datadiv").style.display = "none"
            }else{
                // 发送ajax请求
                // 1. 创建AJAX核心对象
                const xmlHttpRequest = new XMLHttpRequest();
                // 2. 注册回调函数
                xmlHttpRequest.onreadystatechange = () => {
                    if (xmlHttpRequest.readyState == 4) {
                        if (xmlHttpRequest.status >= 200 && xmlHttpRequest.status < 300) {
                            // [{"content":"javascript"},{"content":"javaweb"},{"content":"java..."}]
                            const json = JSON.parse(xmlHttpRequest.responseText);
                            // 遍历数组
                            let html = ""
                            for (let i = 0; i < json.length; i++) {
                                html += "<p οnclick='setInput(\""+json[i].content+"\")'>"+json[i].content+"</p>"
                            }
                            document.getElementById("datadiv").innerHTML = html
                            // 显示出来
                            document.getElementById("datadiv").style.display = "block"
                        }
                    }
                }
                // 3. 开启通道
                xmlHttpRequest.open("GET", "/ajax-autocomplete/query?_="+new Date().getTime()+"&keywords=" + this.value, true)
                // 4. 发送请求
                xmlHttpRequest.send()
            }

        }
    }

    function setInput(content){
        document.getElementById("keywords").value = content
        document.getElementById("datadiv").style.display = "none"
    }
</script>

<input type="text" class="userInput" id="keywords">

<div id="datadiv" class="showDataDiv">
    <!--<p>北京疫情最新情况</p>
    <p>北京天气</p>
    <p>北京时间</p>
    <p>北京人</p>-->
</div>


@WebServlet("/query")
public class QueryServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 获取用户输入的关键字
        String keywords = request.getParameter("keywords");
        // jdbc代码连接数据库，根据关键字查询数据库，返回数据，拼接json格式的字符串
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        StringBuilder sb = new StringBuilder();
        sb.append("[");
        try {
            // 注册驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 获取连接
            String url = "jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=UTF-8";
            String user = "root";
            String password = "root";
            conn = DriverManager.getConnection(url, user, password);

            String sql = "select content from t_ajax where content like ?"; // 模糊查询的时候，条件不建议使用%开始，因为会让字段上的索引失效，查询效率降低。
            ps = conn.prepareStatement(sql);
            ps.setString(1, keywords + "%");
            rs = ps.executeQuery();
            // [{"content":"javascript"},{"content":"javaweb"},{"content":"java..."}]
            while (rs.next()) {
                String content = rs.getString("content");
                sb.append("{\"content\":\""+content+"\"},");
            }

        }catch(Exception e){
            e.printStackTrace();
        } finally {
            if (conn != null) {
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (ps != null) {
                try {
                    ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if (rs != null) {
                try {
                    rs.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }

        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().print(sb.subSequence(0, sb.length() - 1) + "]");

    }
}

附录：HTTP状态信息

1xx: 信息

消息:	描述:
100 Continue	服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols	服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。

2xx: 成功

消息:	描述:
200 OK	请求成功（其后是对GET和POST请求的应答文档。）
201 Created	请求被创建完成，同时新的资源被创建。
202 Accepted	供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information	文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content	没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content	没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content	客户发送了一个带有Range头的GET请求，服务器完成了它。

3xx: 重定向

消息:	描述:
300 Multiple Choices	多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently	所请求的页面已经转移至新的url。
302 Found	所请求的页面已经临时转移至新的url。
303 See Other	所请求的页面可在别的url下被找到。
304 Not Modified	未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy	客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused	此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect	被请求的页面已经临时移至新的url。

4xx: 客户端错误

消息:	描述:
400 Bad Request	服务器未能理解请求。
401 Unauthorized	被请求的页面需要用户名和密码。
402 Payment Required	此代码尚无法使用。
403 Forbidden	对被请求页面的访问被禁止。
404 Not Found	服务器无法找到被请求的页面。
405 Method Not Allowed	请求中指定的方法不被允许。
406 Not Acceptable	服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required	用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout	请求超出了服务器的等待时间。
409 Conflict	由于冲突，请求无法被完成。
410 Gone	被请求的页面不可用。
411 Length Required	“Content-Length” 未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed	请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large	由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long	由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type	由于媒介类型不被支持，服务器不会接受请求。
416	服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed

5xx: 服务器错误

消息:	描述:
500 Internal Server Error	请求未完成。服务器遇到不可预知的情况。
501 Not Implemented	请求未完成。服务器不支持所请求的功能。
502 Bad Gateway	请求未完成。服务器从上游服务器收到一个无效的响应。
503 Service Unavailable	请求未完成。服务器临时过载或当机。
504 Gateway Timeout	网关超时。
505 HTTP Version Not Supported	服务器不支持请求中指明的HTTP协议版本。