Ajax初识

最新推荐文章于 2024-07-28 10:23:25 发布

Recar

最新推荐文章于 2024-07-28 10:23:25 发布

阅读量378

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest json

本文链接：https://blog.csdn.net/qq_28295425/article/details/53980141

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.Ajax简介

异步javascript和xml（JSON）
Ajax属于客户端和服务端交互的一项技术

这里写图片描述

原有交互模式：（整个页面刷新+请求和响应同步处理。（就是请求响应了才能发下一个请求））
浏览器请求—>Tomcat服务器—>Tomcat将响应信息给浏览器浏览器显示响应的结果

用Ajax交互模式：（局部刷新+异步处理）
浏览器请求–>XMLHttpRequest发送–>Tomcat服务器–>Tomcat返回结果–>XMLHttpRequest接收结果将结果显示到浏览器页面（是XMLHttpRequest接收的然后给浏览器）

2.Ajax好处

具有局部刷新和异步处理特性
提高了程序交互效率（传递数据量要少）
提升用户体验（避免了整个页面频繁刷新）

3.Ajax技术

Ajax技术是一系列技术的综合运用。
基于JS发请求和响应处理
以XMLHttpRequest对象为核心
涉及Html,css页面渲染技术
涉及XML,JSON等数据交互格式

写一个servlet来测试和jsp

这里写图片描述

不用Ajax的话。点击查看上证指数会发请求，显示tomcat的响应。就不会显示下面的asd和zxc即当前页面的内容。用Ajax的话就可以了。

要注意是XMLHttpRequest 前面的XML都是大写的！！！

就是在jsp页面写ajax

<script type="text/javascript">

    //创建XmlHttpRequest对象
    function getxhr(){

    var xhr = new XMLHttpRequest();
    //创建一个HTTP GET请求
    xhr.open("get", "servlet/demoservlet");
    //默认是异步的
    xhr.send(null);
    //因为是get，所以写的null，如果是psot就写数据了。

    }


    </script>



  </head>

  <body>

<a href="servlet/demoservlet" onclick="getxhr()">查看上证指数</a>

<br>

asdasd
zxczxc
qweqwe

  </body>
</html>

XMLHttpRequest属性
readyState:0,1,2,3,4 请求状态等于4的话表示请求处理完毕

responseText：获取服务器返回文本信息
responseHtml：获取服务器返回的XML信息

主要是js

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>Ajax Demo</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

    <script type="text/javascript">

    //创建XmlHttpRequest对象
    function getxhr(){

    var xhr = new XMLHttpRequest();
    //创建一个HTTP GET请求
    xhr.open("get", "servlet/demoservlet");
    //默认是异步的

    //注册一个回调函数，请求处理时自动调用
    //要写在send前面
    xhr.onreadystatechange =function(){
            if(xhr.readyState==4){//请求处理完毕
            //获取请求响应的消息
            var msg = xhr.responseText;

            //将消息放到id=msg的span显示

            document.getElementById("msg").innerHTML=msg;

            }
    };

    xhr.send(null);
    //因为是get，所以写的null，如果是psot就写数据了。



    }


    </script>



  </head>

  <body>

<b onclick="getxhr()">点击查看上证指数</b>

<br>
<span id="msg"></span>

<br>
asdasd
zxczxc
qweqwe

  </body>
</html>

这里写图片描述

js 函数

//创建XmlHttpRequest对象
    function getxhr(){

    var xhr = new XMLHttpRequest();
    //创建一个HTTP GET请求
    xhr.open("get", "servlet/demoservlet");
    //默认是异步的

    //注册一个回调函数，请求处理时自动调用
    //要写在send前面
    xhr.onreadystatechange =function(){
            if(xhr.readyState==4){//请求处理完毕
            //获取请求响应的消息
            var msg = xhr.responseText;

            //将消息放到id=msg的span显示

            document.getElementById("msg").innerHTML=msg;

            }
    };

    xhr.send(null);
    //因为是get，所以写的null，如果是psot就写数据了。

    }

检测注册的名字是否被占用

主要也是练习js使用ajax就是利用XMLHttpRequest的各种方法

//ajax提交用户名，servlet检测是否可用

    function checkname(){

    //获取提交的值
    var username = document.getElementById("username").value;
        var xhr = new XMLHttpRequest();
        xhr.open("get", "servlet/Checkname?username="+username);


        xhr.onreadystatechange =function(){
                if(xhr.readyState==4&&xhr.status==200){//请求处理完毕
            //获取请求响应的消息
            var msg = xhr.responseText;

            //将消息放到id=msg的span显示

            document.getElementById("check").innerHTML=msg;

            }
    };
        xhr.send(null);
    }

<br>
<input type="text" id="username" onblur="checkname()"><span id="check"></span>

servlet

package servlet;
/**
 * 用来简单检测请求传过来的值
 */
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Checkname extends HttpServlet {


    public void service(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String username = request.getParameter("username");
        System.out.println("======被请求======");
        System.out.println("username: "+username);
        if(username.equals("Recar")){
            out.print("用户名被占用");
        }else{

            out.print("可用");
        }

        out.flush();
        out.close();
    }

}

文本框输入测试的用户名。鼠标离开文本框触发事件onblur 调用checkname方法。做ajax请求。然后servlet做处理。利用回调函数判断并赋值 span

与之前的不同的是get的请求带了个参数username

这里写图片描述

但是用户名是中文的话就用post来发请求

若改成post请求的话改变的就是post和send 数据都在send 中写了

    xhr.open("post", "servlet/Checkname");
    xhr.send("username="+username);

但是这么写不行。。。

会报500错误
少了个参数

手动增加

    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//给HTTP协议设置请求头
        xhr.send("username="+username);

在send前面增加如上参数。这种是自己写js 有jQ的话就很方便

还有要在控制台输出提交的中文要记得设置request的编码

    request.setCharacterEncoding("utf-8");

XMLHttpRequest方法

open(“GET|POST”,URL);
send(需要传递的数据);
onreadyStatechange 事件
status：HTTP响应CODE,200,404 500等
readyState改变时触发注册事件

Recar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax初识

1.Ajax简介异步javascript和xml（JSON） Ajax属于客户端和服务端交互的一项技术原有交互模式：（整个页面刷新+请求和响应同步处理。（就是请求响应了才能发下一个请求））浏览器请求—>Tomcat服务器—>Tomcat将响应信息给浏览器浏览器显示响应的结果用Ajax交互模式：（局部刷新+异步处理）浏览器请求–>XMLHttpRequest发送–>Tomcat服务器–>
复制链接

扫一扫

专栏目录