Ajax使用

发布时间：2020-12-16 02:51:16 所属栏目：百科来源：网络整理

导读：什么是Ajax？ Ajax是一种创建快速动态网页的技术，通过与后台服务器进行少量数据交互，可以使网页异步更新，这意味着可以在不加载整个页面的情况下，局部更新页面某个部分。原生Ajax的使用： XMLHttpRequest是Ajax使用的基础， 1.创建XMLHttpRequest对象：

什么是Ajax？

Ajax是一种创建快速动态网页的技术，通过与后台服务器进行少量数据交互，可以使网页异步更新，这意味着可以在不加载整个页面的情况下，局部更新页面某个部分。

原生Ajax的使用：

XMLHttpRequest是Ajax使用的基础，

　　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对象

　　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方法中参数：1、get：表示发送get请求，如果是post则发送post请求；

　　　　　　　　　　? 2、/TestServlet?name=‘zhangsan‘&pass=‘123‘：表示发送请求的URL，以及传递的参数；post方式传递的参数不能加在URL后面，post方式的参数在send方法中传递

?　　　　　　　　　　 3、true：表示发送异步请求，false：表示不发送异步请求

?　　使用send方法发送；

　　3.使用onreadystatechange事件判断响应状态，readyState状态每改变一次就会触发一次onreadystatechange

　　xmlhttp.readyState有五种状态：0 ：表示请求未初始化

　　　　　　　　　　　　　　　　1：表示服务器连接已建立

　　　　　　　　　　　　　　　　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多种，以上是基本的参数，

其他参数可参考：https://www.cnblogs.com/tylerdonet/p/3520862.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",data:"name=王五&pass=789",success:function (result) {
                    alert(result);
                }
            });*/
            //规定有四个参数,1.url,2.data发送的数据,3.请求成功时运行的函数，4.返回值类型
            $.get(
                "/TestServlet","name=赵云&pass=258",function(result,"text"
            );
        });
        $(".Jajaxpost").click(function () {
            /*$.ajax({
                url:"/TestServlet",type:"post",data:"name=赵六&pass=147",success:function (result) {
                    alert(result);
                }
            });*/
            $.post(
                "/TestServlet","name=诸葛亮&pass=369","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>

JSP页面

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

Ajax使用

什么是Ajax？

原生Ajax的使用：

1.创建XMLHttpRequest对象：

2.使用XMLHttpRequest对象发送请求：

get方式 ：

? Post方式：

3.使用onreadystatechange事件判断响应状态，readyState状态每改变一次就会触发一次onreadystatechange

? 4.获取响应数据，有两种方式：1.响应数据格式为字符串，使用responseText接收，2.响应数据为xml形式，使用responseXML来接收，如上述代码xmlhttp.responseText

完整代码如下：

JQuery封装之后Ajax使用

?1.引入Jquery库，下载或者在网页加载；网页加载方式

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

　　1.创建XMLHttpRequest对象：

　　2.使用XMLHttpRequest对象发送请求：

　　　get方式　：

?　　 Post方式：

　　3.使用onreadystatechange事件判断响应状态，readyState状态每改变一次就会触发一次onreadystatechange

?　　4.获取响应数据，有两种方式：1.响应数据格式为字符串，使用responseText接收，2.响应数据为xml形式，使用responseXML来接收，如上述代码xmlhttp.responseText

　　完整代码如下：