Ajax 2021-09-07

最新推荐文章于 2024-09-17 14:30:35 发布

单眼皮女孩i

最新推荐文章于 2024-09-17 14:30:35 发布

阅读量90

点赞数 1

文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_44889526/article/details/120155044

版权

Ajax

ajax简介

1、全称：AsynchronousJavaScript  and  XML (异步javascript与XML)
2、学习Ajax要求掌握以下知识：
 – JavaScript技术 
 – 使用JavaScript与DOM进行交互操作的技术 
 – 基于Web标准的页面布局
 – XML技术 
 – JavaScript解析XML的技术
 – 利用XMLHttpRequest对象发出异步请求的技术 
 – 服务器端编程技术（如JSP或Servlet）

ajax原理

通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来
操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

xmlHttpRequest对象

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

XMLHttpRequest 对象是名为 AJAX的 Web 应用程序架构的一项关键功能。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建XMLHttpRequest对象

1、所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

var xmlHttp = new XMLHttpRequest();

2、老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

if(window.ActiveXObject){
var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}

3、兼容模式：

    var xmlHttp;
    function createXmlHttpRequest() {
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else {
            xmlHttp = new XMLHttpRequest();
        }
    }

XMLHttpRequest对象常用属性：

onreadystatechange 属性
onreadystatechange 属性存有处理服务器响应的函数。
readyState 属性
readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
（值0-4）

0: 请求未初始化（还未调用open方法）
1: 服务器连接已建立（已调用open正发送请求）
2: 请求已接收（send方法完成已收到响应）
3: 请求处理中（正在解析响应内容）
4: 请求已完成，且响应已就绪（解析完成）

responseText 属性
可以通过 responseText 属性来取回由服务器返回的数据。

Ajax引擎

• 应该做什么？
– 能够被JavaScript调用。JavaScript需要指定请求地址、请求方式与参数，同时JavaScript还需要能够从“引擎”中得到服务器返回的数据。
– 能够异步请求服务器并接受返回的数据。JavaScript本身并不能访问网络，这部分功能必须委托“引擎”实现。
– “引擎”也要能够调用JavaScript。这样才是实现当服务器数据返回时通知JavaScript进行处理。
• 不该做什么？
– “引擎”不会处理用户的请求，也不会处理业务逻辑，只是将请求转发给服务器，由服务器端的程序进行处理。
– 当服务器端数据返回后，“引擎”不会代替JavaScript完成页面显示工作，只是将通知JavaScript，由JavaScript进行后续的处理。

Ajax请求

1.创建XMLHttpRequest异步对象
2.设置回调函数
3.使用open方法与服务器建立连接
4.向服务器发送数据
5.在回调函数中针对不同的响应状态进行处理

Ajax实例（编程）

ajax.jsp:

<body>
请输入用户名：<input type="text" name="" id="userName" value="">
<script>
    var xmlHttp = null;

    //构建引擎
    function createXmlHttpRequest() {
        if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }else {
            xmlHttp = new XMLHttpRequest();
        }
    }

    createXmlHttpRequest();

    document.querySelector("#userName").onchange = function () {
        let userName = this.value;
        //发出请求
        //Post
        xmlHttp.open("POST","/ajaxReq");
        xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xmlHttp.onreadystatechange = callback;
        xmlHttp.send("userName=" + userName);

        //Get
        // xmlHttp.open("GET","/ajaxReq?userName="+encodeURIComponent(userName)+"&time="+new Date().getTime());//时间戳
        // xmlHttp.send();

        //Put
        // xmlHttp.open("PUT","/ajaxReq?userName="+userName);
        // xmlHttp.send();

        //Delete
        // xmlHttp.open("DELETE","/ajaxReq?userName="+userName);
        // xmlHttp.send();
        
    }
    
    function callback() {
        alert(xmlHttp.readyState);//状态码 0-4
        if(xmlHttp.readyState == 4){
            if(xmlHttp.status == 200){
                var result = xmlHttp.responseText;//获取服务端的文本值
                alert(result);
            }else {
                // alert(xmlHttp.status);
                alert("服务器升级中！")//除200之外的状态码
            }
        }
    }
</script>
</body>

ajaxRequestServlet.java:

package com.hisoft.web;

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;
import java.io.PrintWriter;

@WebServlet("/ajaxReq")
public class ajaxRequestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userName = req.getParameter("userName");
        System.out.println("Get:" + userName);

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/plain;charset=utf-8");
        String userName = req.getParameter("userName");
        System.out.println("Post:" + userName);

        PrintWriter out = resp.getWriter();
        out.print("添加成功！");
        out.close();

    }

    @Override
    protected void doPut(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userName = req.getParameter("userName");
        System.out.println("Put:" + userName);
    }

    @Override
    protected void doDelete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String userName = req.getParameter("userName");
        System.out.println("Delete:" + userName);
    }
}

获取http状态码：

var serverCode = xmlHttp.status；

200	服务器正常处理了请求并响应
404	请求的页面未找到

403	没有权限访问请求的页面
405	页面不接收该请求方式（比如用GET请求一个只支持doPost方法的Servlet）
408	请求超时
500	服务器处理请求时遇到错误（可能因为应用程序抛出异常导致）
503	服务暂时不可用（可能出现在服务器尚未初始化完成时）
304	网页未修改