Ajax与json

时间：2023-01-18 05:41:19

Ajax

Ajax简介

　　Ajax技术，从用户发送请求到获取响应，当用户界面在整个过程中不会受到干扰，而且我们可以在必要的时候只刷新页面的一小部分，而不用刷新整个页面，即"无刷新"技术

　　Ajax(Asynchronous JavaScript and Xml)并不是一种全新的技术，而是整合了JavaScript.XML.CSS等几种技术而成

　　Ajax的执行流程是，在用户界面触发事件调用JavaScript,通过Ajax引擎---XMLHttpRequest对象异步发送请求到服务器,服务器返回XML.JSON或HTML等格式的数据，然后利用返回的数据使用DOM和CSS技术局部更新用户界面

Ajax与json

　　Ajax的关键元素包括以下内容：

　　1.JavaScript语言：Ajax技术的主要开发语言

　　2.XML/JSON/HTML等：用来封装请求或者相应的数据格式

　　3.DOM（文档对象模型）：通过DOM属性或方法修改页面元素，实现页面局部刷新

　　4.CSS：改变样式，美化页面的效果，提升用户体验度

　　5.Ajax引擎：即XMLHttpRequest对象，以异步方式在客户端与服务器之间传递数据

XMLHttpRequest

XMLHttpRequest常用方法

Ajax与json

XMLHttpRequest常用属性

Ajax与json

Ajax与json

编写测试（提交方式为get） (index.jsp页面上有两个文本框，一个name为txtName，一个name为txtPwd，当在txtName输入用户名时（鼠标光标移除文本框时）来判断用户名是否被注册并提示错误信息)

步骤一.搭建环境，新建Web工程,新建一个Servlet

package cn.happy.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 CheckUserServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request,response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            //定义一个字符串uname，request.getParameter("uname")中的uname是从前端页面获取的
            String uname=request.getParameter("uname");
            //判断字符串uname的值是否为andmin
            if(uname.equals("admin"))
            {
                response.getWriter().write("OK");
            }else
            {
                response.getWriter().write("NO");
            }
    }
}

步骤2:在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校验</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
       window.onload=function(){
        var dom=document.getElementById("txtName");
          dom.onblur=function(){
             myajax();
          };
    };
    function myajax(){
       //01.定制出 xhr对象
       var xhr;
       //02.能力检测
       if(window.XMLHttpRequest){
           //非IE浏览器
          xhr=new XMLHttpRequest();
       }else{
          //IE内核
          xhr=new ActiveXObject("Microsoft.XMLHttp");
       }
        var dom=document.getElementById("txtName");
        var myspan=document.getElementById("msg");
        var myval=dom.value;
       //03.构建请求地址
       //xhr.open("请求类型","请求地址","是否异步");
       xhr.open("get","<%=path%>/servlet/CheckUserServlet?uname="+myval,true);

       //04.设置回调函数     响应回来的数据
       xhr.onreadystatechange=function(){
         //什么
         if(xhr.readyState==4&&xhr.status==200){
            //获取响应数据
            var data=xhr.responseText;
            if(data=='OK'){

                 myspan.innerText="用户名已经被注册";
            }else{

                 myspan.innerText="用户名可以注册";
            }
         }
       };
       //05.用send真正的发送请求
       xhr.send(null);
       }
    </script>
  </head>
  <body>
    <h1>register</h1>
    用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
    <br/>
  密      码：<input name="upwd" type="password" id="txtPwd"/>
  </body>
</html>

步骤三：在浏览器端测试效果

当在txtName输入不是admin的字符时，我们来看下效果

Ajax与json

当在txtName输入是admin的字符时，我们来看下效果

Ajax与json

编写测试（提交方式为post） (index.jsp页面上有两个文本框，一个name为txtName，一个name为txtPwd，当在txtName输入用户名时（鼠标光标移除文本框时）来判断用户名是否被注册并提示错误信息)

当提交方式为Post时，我们只需要在index.jsp的页面上修改JavaScript代码即可，其他步骤不变

<%@ 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校验</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
       window.onload=function(){
        var dom=document.getElementById("txtName");
          dom.onblur=function(){
             myajax();
          };

    };

    function myajax(){

       //01.定制出 xhr对象
       var xhr;
       //02.能力检测
       if(window.XMLHttpRequest){
           //非IE浏览器
          xhr=new XMLHttpRequest();
       }else{
          //IE内核
          xhr=new ActiveXObject("Microsoft.XMLHttp");
       }
        var dom=document.getElementById("txtName");
        var myspan=document.getElementById("msg");
        var myval=dom.value;
       //03.构建请求地址
       //xhr.open("请求类型","请求地址","是否异步");
       xhr.open("post","<%=path%>/servlet/CheckUserServlet",true);

       //04.设置回调函数     响应回来的数据
       xhr.onreadystatechange=function(){
         //什么
         if(xhr.readyState==4&&xhr.status==200){
            //获取响应数据
            var data=xhr.responseText;
            if(data=='OK'){
                 myspan.innerText="用户名已经被注册";
            }else{

                 myspan.innerText="用户名可以注册";
            }
         }
       };
       //05.用send真正的发送请求
       xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       xhr.send("uname="+myval);

       }
    </script>
  </head>

  <body>
    <h1>register</h1>
    用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
    <br/>
  密      码：<input name="upwd" type="password" id="txtPwd"/>
  </body>
</html>

标黄颜色背景的代码与上面提交方式为get请求的代码不同,我们需要注意当为Post请求时setRequestHeader()的方法是必须要写的

我们来看一下效果：

当在txtName输入不是admin的字符时，我们来看下效果

Ajax与json

当在txtName输入是admin的字符时，我们来看下效果

Ajax与json

注意Request Method的值已经变成Post

JSON

JSON:JavaScript对象表示法（JavaScript Object Notation）它是存储和交换文本信息的语法，类似于XML。JSON比XML更小，更快，更清晰

测试：（在Web项目中新建一个json.jsp页面，来测试JSON）

<%@ 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>json</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
      var data={"firstName":"Brett","lastName":"hehe"};
    $.each(data,function(i,dom){
        alert(dom);
    });
    </script>
  </head>

  <body>
    <h1>register</h1>
    用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
    <br/>
  密      码：<input name="upwd" type="password" id="txtPwd"/>
  </body>
</html>

each()方法用来读取json

我们来看一下效果：（当访问页面时，会出现两个提示，一个为Brett一个为hehe）

Ajax与json

Ajax与json

当需要遍历json时应在json.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>json</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">

      /*var data={"firstName":"Brett","lastName":"hehe"};
    $.each(data,function(i,dom){
    alert(dom);
    }); */

var data={
    "people":[
        {"firstName":"悟空","lastName":"大闹","email":"天宫"},
        {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
        {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
    ]
};
$.each(data.people,function(i,dom){
    alert(dom.firstName);
    });
    </script>
  </head>

  <body>
    <h1>register</h1>
    用户名：<input name="uname" id="txtName"/><br/><span id="msg"></span>
    <br/>
  密      码：<input name="upwd" type="password" id="txtPwd"/>
  </body>
</html>

我们来看下效果（页面上提示出三个提示框一个为悟空，一个为jason，一个为Elliotte）

Ajax与json

Ajax与json

Ajax与json

相关文章