AJAX应该如何发送请求

最新推荐文章于 2025-06-04 14:32:55 发布

阿伟在自律

最新推荐文章于 2025-06-04 14:32:55 发布

阅读量149

点赞数 1

文章标签： ajax servlet java

本文链接：https://blog.youkuaiyun.com/weixin_54232686/article/details/127619046

版权

XMLHttpRequest对象

在这里插入图片描述

XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。
XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。
创建XMLHttpRequest对象
- ```
var xhr = new XMLHttpRequest();
```
XMLHttpRequest对象的方法

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

XMLHttpRequest对象的属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found”
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

AJAX GET请求

@WebServlet("/ajaxRequest")
public class AjaxRequestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        //XMLHttpRequest对象获取输出信息
        out.print("welcome to study ajax");
    }
}

<script>
    window.onload = function (){
        var btn = document.getElementById("hellobtn");
        btn.onclick = function (){
            //发送ajax get请求
            //1.创建ajax核心对象xmlHttpRequest
            var xhr = new XMLHttpRequest();
            //2.注册回调函数
            xhr.onreadystatechange = function (){
                //这个函数在xmlHttpRequest对象的readyState状态值发生改变的时候被调用
                //比如：0-1，1-2，2-3，3-4,当readyState==4的时候，表示响应结束
                // console.log("xhr状态值改变了:",xhr.readyState)
                // console.log("http响应状态码：",this.status)
                if (this.readyState ===4){
                    if (this.status ===200){
                        //通过XMLHttpRequest对象的responseText属性获取响应的信息
                        // this.responseText
                        document.getElementById("mydiv").innerText = this.responseText

                    }else if (this.status === 500){

                        alert("服务器发生了一个错误")
                    }
                }
            }
            //3.开启通道
            //open(method,url,async,user,pwd)
            //method：请求的方式，可以是get也可以是post，也可以是其他请求方式
            //url：请求路径
            //async：只能是true或者fasle，true表示这个ajax请求是一个异步请求，fasle表示ajax请求是一个同步请求
            //user，pwd：用户名密码,有时候需要发送账号密码
            xhr.open("GET","/ajax/ajaxRequest",true)
            //4.发送请求
            xhr.send()
        }
    }
</script>
<body>
    <input type="button" id="hellobtn" value="hello">
    <div id="mydiv"></div>
</body>
</html>

AJAX POST请求

模拟form的post请求

<script>/*模拟form表单提交*/
    window.onload = function (){
        document.getElementById("btn").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState ===4){
                    if (this.status ===200){
                        document.getElementById("mydiv").innerHTML = this.responseText
                    }else {
                        alert("error")
                    }
                }
            }
            xhr.open("POST","/ajax/b",true)
            //设置请求头的内容类型！！！！！！！
 //如果不设置请求头的内容类型，请求头是：Request Payload
 //设置了之后是：Form Data
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            var username = document.getElementById("username").value
            var pwd = document.getElementById("pwd").value
            xhr.send("username="+username+"&pwd="+pwd+"")
        }
    }
</script>
<body>
    用户名：<input type="text" name="username" id="username"><br>
    密码：<input type="password" name="pwd" id="pwd"><br>
    <input type="button" value="点击提交数据" id="btn">
  
    <div id="mydiv">

    </div>
</body>
</html>

JSON

通过自己写代码转换JSON

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        StringBuilder str = new StringBuilder();
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        str.append("[");
        try {
            conn = DbUtil.getConnection();
            String sql = "select * from stu";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            while (rs.next()) {
                str.append("{");
                String name = rs.getString("name");
                int age = rs.getInt("age");
                String address = rs.getString("address");     str.append("\"name\":\""+name+"\",\"age\":\""+age+"\",\"address\":\""+address+"\"},");
            }
            String s = str.substring(0,str.length()-1) + "]";
            out.print(s);

通过fastjson的jar包进行转换JSON

Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        ArrayList<Student> arrayList = new ArrayList<>();
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            conn = DbUtil.getConnection();
            String sql = "select * from stu";
            ps = conn.prepareStatement(sql);
            rs = ps.executeQuery();
            while (rs.next()) {
                String name = rs.getString("name");
                int age = rs.getInt("age");
                String address = rs.getString("address");
                Student student = new Student(name, age, address);
                arrayList.add(student);
            }
            out.print(JSON.toJSONString(arrayList));
//前提是创建好User对象

XML

注意：如果服务器端响应XML的话，响应的内容类型需要写成：
```
response.setContentType("text/xml;charset=UTF-8");
```

前端接收响应也应该修改：

var stuDOC = this.responseXML;//返回一个xml对象

xml和JSON都是常用的数据交换格式
- XML体积大，解析麻烦。较少用。
- JSON体积小，解析简单，较常用。

基于XML的小例子

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = response.getWriter();
        StringBuilder str = new StringBuilder();
        str.append("<Students>");
        str.append("<Student>");
        str.append("<name>zhangsan</name>");
        str.append("<age>18</age>");
        str.append("<address>北京</address>");
        str.append("</Student>");
        str.append("<Student>");
        str.append("<name>lisi</name>");
        str.append("<age>18</age>");
        str.append("<address>上海</address>");
        str.append("</Student>");
        str.append("</Students>");
        out.print(str);
    }

 window.onload = function (){
        document.getElementById("btn").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState ===4){
                    if (this.status ===200){
                        var stuDOC = this.responseXML;//返回一个xml对象
                        var students = stuDOC.getElementsByTagName("Student")
                        var html = ""
                        for (let i = 0; i < students.length; i++) {
                            html += "<tr>"
                            var stu = students[i]
                            var childNodes = stu.childNodes;
                            html +="<td>"+(i+1)+"</td>"
                            for (let j = 0; j < childNodes.length; j++) {
                                var node = childNodes[j]
                                if (node.nodeName === "name"){
                                    html += "<td>"+node.textContent+"</td>"
                                }
                                if(node.nodeName ==="age"){
                                    html += "<td>"+node.textContent+"</td>"
                                }
                                if(node.nodeName ==="address"){
                                    html += "<td>"+node.textContent+"</td>"
                                }
                            }
                            html += "</tr>"
                        }
                        console.log(html)
                        document.getElementById("stubody").innerHTML = html
                    }else {
                        alert("error")
                    }
                }
            }
            xhr.open("GET","/ajax/g",true)
            xhr.send()
        }

AJAX乱码问题

- 对于tomcat9来说呢？
  - 响应中文的时候，会出现乱码，怎么解决？
```
response.setContentType("text/html;charset=UTF-8");
```
  - 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？
```
request.setCharacterEncoding("UTF-8");
```


---

## AJAX乱码问题

- - 对于tomcat9来说呢？

    - 响应中文的时候，会出现乱码，怎么解决？

      ```java
      response.setContentType("text/html;charset=UTF-8");
      ```

    - 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？

      ```java
      request.setCharacterEncoding("UTF-8");
      ```

---

## AJAX的异步与同步