圆月山庄资源网

Ajax技术组成与核心原理分析
网络编程 2024/12/27 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

本文主要为大家分析了Ajax技术组成原理，供大家参考，具体内容如下

1、Ajax
特点：局部刷新、提高用户的体验度，数据从服务器商加载 

2、AJax的技术组成
不是新技术，而是之前技术的整合
Ajax: Asynchronous Javascript And Xml;（异步的JavaScript和XML）
包括的技术：JavaScript、XML、CSS、XMLHttpRequest
异步：发送请求以后，不等结果，由回调函数处理。
JavaScript:向服务器发送请求，获得返回结果，更新页面
XML：用来封装数据 

3、Ajax核心原理
XMLHttpRequst对象：通过该对象向服务器发送请求。
它是异步请求的技术，所有现代浏览器都支持（Chrome、IE5+）

1)创建XMLHttpReuest对象
非IE浏览器（Mozilla/Safari）：var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
低版本IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2)XMLHttpRequest对象的属性与方法
a)方法：open("GET/POST",URL,true/false):用来向服务器建立连接
有三个参数:
参数1：提交方式，post或get
参数2：请求的URL
参数3：表示同步或异步请求，true:表示异步请求
false: 表示同步请求
send(data):发送请求
参数：提交的内容。
POST方式:data就是提交的参数，send(username=root&password=abc123);
GET方式:send(null) 

b)属性：
onreadystatechange:设置状态改变时的回调函数，回调函数用来获取服务器数据。
onreadystatechange=function(){　　　　　　
｝ 

readyState:服务器状态响应
状态码：
0：未初始化
1：正在加载
2：加载完成
3：请求进行中
4：请求完成

responseText:服务器返回的数据(文本格式)
responseXML:服务器返回的数据（XML格式） 

总结：
 使用XMLHttpRequest的步骤：
 　　1)创建XMLHttpRequest对象
 　　2）设置请求的方法及URL
　　　　xhr.open("GET/POST","url",true/false),true表示异步请求，false表示同步请求
 　　3)设置状态改变时的回调函数
 　　　　xhr.onreadystatechange=function(){}
　　　　0:未初始化
 　　　　1:正在加载
 　　　　2:加载完成
 　　　　3：请求进行中
 　　　　4：请求完成
 　　4）发送请求
 　　　　xhr.send(data),
　　　　如果为post提交，则data为提交的数据，如果为get提交，则参数为null即可。

判断用户登录的HTML页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录</title>
</head>
<body>
  用户名：<input type="text" name="username" id="username"><br>
  密码:<input type="password" name="password" id="password">
  <a href="javascript:chkUser();">登录</a>
  <div id="res"></div>
</body>

<script type="text/javascript">
  var xhr;
  /**
  * 创建XMLHttpRequest对象
  */
 function createXMLHttpRequest(){
  //1、创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
      //非IE内核浏览器
     xhr=new XMLHttpRequest(); 
    }else{
      //IE浏览器
      try{
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){
       //IE低版本
        xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
 }
  
  /**
  * 发送请求，用来检查用户名、密码是否正确
  */
  function chkUser(){
    
    //1、创建XMLHttpRequest
    createXMLHttpRequest();
    
    //2、获得用户名、密码
    var username=document.getElementById("username").value;
    var password=document.getElementById("password").value;
    
    //3、与服务器建立连接：open
    var url="login"+username+"&password="+password;
    //方式1：get提交
    //xhr.open("GET",url,true);
    
    //方式2：post提交
    var url2="login";
    xhr.open("POST",url2,true);
    
    
    //4、设置回调函数，获得服务器响应的数据
    xhr.onreadystatechange=function(){
      /*
      readyState状态码：
      0：未初始化
      1：正在加载
      2：加载完成
      3：请求进行中
      4：请求完成
      */
      if(xhr.readyState==4){
        //status,200表示响应正常
        if(xhr.status==200){
         //alert("从服务器返回的值为："+xhr.responseText);
         var res=xhr.responseText;
         if(res=='0'){
           document.getElementById("res").innerHTML="登录成功";
         }else{
           document.getElementById("res").innerHTML="<font color='red'>登录失败</font>";
         }
         
        }else{
          alert("出现在了异常:"+xhr.response.Text);
        }
        
      }
    }
    //5、发送请求
    //方式1：get方式
    //xhr.send(null);
    
    //方式2:post方式：
    //Post提交需要设置http请求头
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username="+username+"&password="+password);
    
    
  }
 
</script>

</html>

服务端代码： 

package com.newer.login.web;

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;

import com.newer.login.bean.User;
import com.newer.login.service.UserService;

/**
 * Servlet implementation class LoginServlet
 */
public class LoginServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

  UserService userService = new UserService();

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doGet(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    doPost(request,response);
  
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *   response)
   */
  protected void doPost(HttpServletRequest request,
      HttpServletResponse response) throws ServletException, IOException {
    // 1、获得页面参数
    String username = request.getParameter("username");
    String password = request.getParameter("password");

    System.out.println("获得请求的参数username:"+username);
    System.out.println("获得请求的参数password:"+password);    
    // 2、封装User对象
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);

    // 3、调用服务类，完成用户名、密码的校验
    User u = userService.login(user);

    /*
     * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
     * //跳转至首页... }else{ //登录失败，跳转登录页面
     * 
     * }
     */
    // ajax响应

    PrintWriter out = response.getWriter();

    if (u != null) {
      //0成功，1失败
      out.print(0);
    }else{
      out.print(1);
    }
    out.close();

  }

}

标签：
ajax技术组成原理,ajax技术组成,ajax技术原理
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接