首页 > 代码库 > Ajax

Ajax

AJAX:即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
优点:局部刷新,减少等待时间,节省很多的带宽
核心对象:XMLHttpRequest

步骤一:使用ajax发送get请求及处理响应

1: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 RegisterServlet 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 {
        String name=request.getParameter("uname");
        if(name.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>My JSP ‘index.jsp‘ starting page</title>
    <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>
    <input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
    <input type="password" name="txtPwd"/>
  </body>
</html>

步骤二:使用ajax发送post请求

servlet不变:在index.jsp中添加

   window.onload=function()
    {
        var dom=document.getElementById("txtName");
        dom.onblur=function()
        {
            myajax();
        };
    };
    function myajax()
    {
        var xhr;
        if(window.XMLHttpRequest)
            {
              xhr=new XMLHttpRequest();
            }
        else
            {
              xhr=new ActionXObject("Microsoft.XMLHttp");
            }
        var dom=document.getElementById("txtName");
        var myspan=document.getElementById("msg");
        var myvalue=http://www.mamicode.com/dom.value;"post", "<%=path%>/servlet/RegisterServlet?uname="+myvalue,true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
        xhr.onreadystatechange=function()
        {
            if(xhr.readyState==4&&xhr.status==200)
                {
                var data=http://www.mamicode.com/xhr.responseText;"用户名已经被注册";
                    }
                else
                    {
                    myspan.innerText="用户名可用";
                    }
                }
        };
        xhr.send(data);
    }

使用GET和POST方式提交的区别

get:指定XMLHttpRequest对象的open()中的method参数为“get”

       指定XMLHttpRequest对象的send方法中的data参数为null

post:1.指定XMLHttpRequest对象的open()方法中method参数为post

         2.指定XMLHttpRequest对象要请求的HTTP头信息,该HTTP请求头为固定写法

        指定XMLHttpRequest对象的send方法中的data需要传递具体的数据!

步骤三:使用jquery实现ajax

servlet不变,index.jsp代码如下:

  //给文本框注册一个失去焦点事件
      $(function(){
         //等待页面上所有标签完毕后执行
         var dom=$("#txtName");
         dom.blur(function(){
            myjquery();
         });
      });
      
      
      function  myjquery(){
      var dom=$("#txtName");
        $.ajax({
          url:‘<%=path%>/servlet/CheckUserServlet‘,
          type:‘post‘,
          data:{uname:dom.val()},
          success:function(today){
             //today server  打到 浏览器的数据
             alert(today);
          }
        });
      
      
      }

比javascript方式简单多了,,,,

步骤四:初识json

JSON(即json)简介:

  JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(网络传输速率)。

JSON语法规则:

       JSON 语法是 JavaScript 对象表示语法的子集。

  1. 数据在名称/值对中

  2. 数据由逗号分隔

  3. 花括号保存对象

  4. 方括号保存数组

  5. json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构。

    1. 对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种

    2. 数组:数组在js中是中括号“[]”括起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。

           经过对象、数组2种结构就可以组合成复杂的数据结构了。

     //var json={"firstName":"yym","secondName":"myy","thirdName":"ymy"};
     
     
     /*$.each(json,function(i,dom){
        alert(dom);
     });*/
     
     /*var json=
     {
    "people":[
        {"firstName":"孙悟空","lastName":"大闹天宫","email":"aaaa"},
        {"firstName":"美猴王","lastName":"花果山山大王","email":"bbbb"},
        {"firstName":"大圣","lastName":"天上各位尊神尊称他","email":"cccc"},
          {"firstName":"弼马温","lastName":"人生第一份工作","email":"DDDD"}
    ]
   };
   
   $.each(json.people,function(i,dom){
        alert(dom.firstName+"\n"+dom.lastName);
   });*/
 
   var json={
    "programmers": [{
        "firstName": "Brett",
        "lastName": "McLaughlin",
        "email": "aaaa"
    }, {
        "firstName": "Jason",
        "lastName": "Hunter",
        "email": "bbbb"
    }, {
        "firstName": "Elliotte",
        "lastName": "Harold",
        "email": "cccc"
    }],
    "authors": [{
        "firstName": "Isaac",
        "lastName": "Asimov",
        "genre": "sciencefiction"
    }, {
        "firstName": "Tad",
        "lastName": "Williams",
        "genre": "fantasy"
    }, {
        "firstName": "Frank",
        "lastName": "Peretti",
        "genre": "christianfiction"
    }],
    "musicians": [{
        "firstName": "Eric",
        "lastName": "Clapton",
        "instrument": "guitar"
    }, {
        "firstName": "Sergei",
        "lastName": "Rachmaninoff",
        "instrument": "piano"
    }]
};
     $.each(json.programmers,function(i,dom){
        alert(dom.firstName+"\n"+dom.lastName);
   });

注意:在此换行一直是“/n”,我一直忘记了哈哈!

Ajax