Ajax

首页 > 代码库 > Ajax

2024-08-16 15:22:04 220人阅读

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 对象表示语法的子集。

数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组
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

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > Ajax

Ajax

看完仍有疑问？有类似问题直接问程序猿