Ajax使用

時間 2019-12-19

標籤 ajax 使用欄目 Ajax 简体版

原文原文鏈接

什麼是Ajax？

Ajax是一種建立快速動態網頁的技術，經過與後臺服務器進行少許數據交互，能夠使網頁異步更新，這意味着能夠在不加載整個頁面的狀況下，局部更新頁面某個部分。html

原生Ajax的使用：

XMLHttpRequest是Ajax使用的基礎，java

　　1.建立XMLHttpRequest對象：

　　　　var xmlhttp; <!--建立xmlhttprequest對象--> if(window.XMLHttpRequest){ //IE7，chrome，firefox等 xmlhttp = new XMLHttpRequest(); }else{ //IE5，IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

定義變量xmlhttp，判斷瀏覽器是否內置XMLHttpRequest，現代瀏覽器基本都內建XMLHttpRequest對象，IE5，IE6使用ActiveObject對象jquery

　　2.使用XMLHttpRequest對象發送請求：

　　　get方式　：

　　　　 xmlhttp.open("get","/TestServlet?name='zhangsan'&pass='123'",true); xmlhttp.send();

　　 Post方式：

　　　　 xmlhttp.open("post","/TestServlet",true); //使用post方式帶數據，要添加頭，說明提交的數據時一個通過Url編碼的form表單數據 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("name=lisi&pass=456");

　open方法中參數：一、get：表示發送get請求，若是是post則發送post請求；ajax

　　　　　　　　　　二、/TestServlet?name='zhangsan'&pass='123'：表示發送請求的URL，以及傳遞的參數；post方式傳遞的參數不能加在URL後面，post方式的參數在send方法中傳遞chrome

　　　　　　　　　　三、true：表示發送異步請求，false：表示不發送異步請求json

　　使用send方法發送；瀏覽器

　　3.使用onreadystatechange事件判斷響應狀態，readyState狀態每改變一次就會觸發一次onreadystatechange

　　xmlhttp.readyState有五種狀態：0 ：表示請求未初始化服務器

　　　　　　　　　　　　　　　　1：表示服務器鏈接已創建app

　　　　　　　　　　　　　　　　2：表示請求已接收異步

　　　　　　　　　　　　　　　　3：表示請求處理中

　　　　　　　　　　　　　　　　4：表示請求已完成，且響應已就緒

　　xmlhttp.status的狀態：200：表示「OK」
　　　　　　　　　　　　　　404：表示未找到
　　判斷若是readyState狀態是4，且status狀態是200，則接收到了服務器響應的數據

xmlhttp.onreadystatechange=function(){
 if(xmlhttp.readyState==4 && xmlhttp.status == 200){
 alert(xmlhttp.responseText)
 }
 }

　　4.獲取響應數據，有兩種方式：1.響應數據格式爲字符串，使用responseText接收，2.響應數據爲xml形式，使用responseXML來接收，如上述代碼xmlhttp.responseText

　　完整代碼以下：

　　1.Servlet代碼：

package com.ypf.servlet;


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String pwd = req.getParameter("pass");
        resp.setCharacterEncoding("UTF-8");
        resp.getWriter().write("收到了請求，信息爲"+name+"--->"+pwd);
    }
}

TestServlet

　　2.jsp頁面代碼

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/1 0001
  Time: 13:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax測試</title>
<script>
    function SendGet() {
       var xmlhttp;
       <!--建立xmlhttprequest對象-->
       if(window.XMLHttpRequest){
           //IE7，chrome，firefox等
           xmlhttp = new XMLHttpRequest();
       }else{
           //IE5，IE6
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlhttp.open("get","/TestServlet?name=zhangsan&pass=123",true);
       xmlhttp.send();
       xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status == 200){
                alert(xmlhttp.responseText)
            }
        }
    }
    function SendPost() {
        var xmlhttp;
        <!--建立xmlhttprequest對象-->
        if(window.XMLHttpRequest){
            //IE7，chrome，firefox等
            xmlhttp = new XMLHttpRequest();
        }else{
            //IE5，IE6
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("post","/TestServlet",true);
        //使用post方式帶數據，要添加頭，說明提交的數據時一個通過Url編碼的form表單數據
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("name=lisi&pass=456");
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status == 200){
                alert(xmlhttp.responseText)
            }
        }
    }
</script>
</head>
<body>
<h2>Ajax發送get請求</h2>
<button onclick="SendGet()">Ajax發送get請求</button>
<hr>
<h2>Ajax發送post請求</h2>
<button onclick="SendPost()">Ajax發送post請求</button>

</body>
</html>

JSP頁面

JQuery封裝以後Ajax使用

1.引入Jquery庫，下載或者在網頁加載；網頁加載方式

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

2.JQuery中使用$.ajax方式：

$.ajax({ url:"/TestServlet", type:"get", data:"name=王五&pass=789", success:function (result) { alert(result); } });

url:請求路徑，type:發送請求類型，data：發送的數據（get方式可加在url以後），succse：請求成功調用的回調函數，這種方式參數有20多種，以上是基本的參數，

其餘參數可參考：http://www.javashuo.com/article/p-cmzgnain-bc.html

簡單的get方式也能夠替換爲：$.get();這種get方式只有四個參數：1.url：請求路徑，2.data：發送請求數據，3.請求成功的回調函數，4.響應的數據類型（text，json，xml等）

　　　　$.get(
                "/TestServlet",
                "name=趙雲&pass=258",
                function(result,status,xhr){
                    alert(result);
                    alert(status);
                },
　　　　　　　　　　"text"
            );

post方式使用：$.post(),與$.get()參數類型一致，四個參數；

Servlet代碼與原生Ajax方式一致；

Jsp完整代碼以下：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/1 0001
  Time: 13:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax測試</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
<script>
    
    $(document).ready(function () {
        $(".Jajaxget").click(function () {
            /*$.ajax({
                url:"/TestServlet",
                type:"get",
                data:"name=王五&pass=789",
                success:function (result) {
                    alert(result);
                }
            });*/
            //規定有四個參數,1.url,2.data發送的數據,3.請求成功時運行的函數，4.返回值類型
            $.get(
                "/TestServlet",
                "name=趙雲&pass=258",
                function(result,status,xhr){
                    alert(result);
                    alert(status);
                },"text"
            );
        });
        $(".Jajaxpost").click(function () {
            /*$.ajax({
                url:"/TestServlet",
                type:"post",
                data:"name=趙六&pass=147",
                success:function (result) {
                    alert(result);
                }
            });*/
            $.post(
                "/TestServlet",
                "name=諸葛亮&pass=369",
                function(result,status,xhr){
                    alert(result);
                    alert(status);
                },"text"
            );
        });
    });
</script>
</head>
<body>
<h2>Jquery封裝Ajax發送get請求</h2>
<button class="Jajaxget">Jquery封裝Ajax發送get請求</button>
<h2>Jquery封裝Ajax發送post請求</h2>
<button class="Jajaxpost">Jquery封裝Ajax發送post請求</button>
</body>
</html>