佳木斯湛栽影视文化发展公司

主頁(yè) > 知識(shí)庫(kù) > Ajax技術(shù)組成與核心原理分析

Ajax技術(shù)組成與核心原理分析

熱門(mén)標(biāo)簽:團(tuán)購(gòu)網(wǎng)站 Linux服務(wù)器 銀行業(yè)務(wù) 服務(wù)器配置 電子圍欄 阿里云 科大訊飛語(yǔ)音識(shí)別系統(tǒng) Mysql連接數(shù)設(shè)置

本文主要為大家分析了Ajax技術(shù)組成原理,供大家參考,具體內(nèi)容如下

1、Ajax
特點(diǎn):局部刷新、提高用戶的體驗(yàn)度,數(shù)據(jù)從服務(wù)器商加載 

2、AJax的技術(shù)組成
不是新技術(shù),而是之前技術(shù)的整合
Ajax: Asynchronous Javascript And Xml;(異步的JavaScript和XML)
包括的技術(shù):JavaScript、XML、CSS、XMLHttpRequest
異步:發(fā)送請(qǐng)求以后,不等結(jié)果,由回調(diào)函數(shù)處理。
JavaScript:向服務(wù)器發(fā)送請(qǐng)求,獲得返回結(jié)果,更新頁(yè)面
XML:用來(lái)封裝數(shù)據(jù) 

3、Ajax核心原理
XMLHttpRequst對(duì)象:通過(guò)該對(duì)象向服務(wù)器發(fā)送請(qǐng)求。
它是異步請(qǐng)求的技術(shù),所有現(xiàn)代瀏覽器都支持(Chrome、IE5+)

1)創(chuàng)建XMLHttpReuest對(duì)象
非IE瀏覽器(Mozilla/Safari):var xhr=new XMLHttpRequest();
IE:xhr=new ActiveXObject("Msxml2.XMLHTTP");
低版本IE:xhr=new ActiveXObject("Microsfot.XMLHTTP");
2)XMLHttpRequest對(duì)象的屬性與方法
a)方法:open("GET/POST",URL,true/false):用來(lái)向服務(wù)器建立連接
有三個(gè)參數(shù):
參數(shù)1:提交方式,post或get
參數(shù)2:請(qǐng)求的URL
參數(shù)3:表示同步或異步請(qǐng)求,true:表示異步請(qǐng)求
false: 表示同步請(qǐng)求
send(data):發(fā)送請(qǐng)求
參數(shù):提交的內(nèi)容。
POST方式:data就是提交的參數(shù),send(username=rootpassword=abc123);
GET方式:send(null) 

b)屬性:
onreadystatechange:設(shè)置狀態(tài)改變時(shí)的回調(diào)函數(shù),回調(diào)函數(shù)用來(lái)獲取服務(wù)器數(shù)據(jù)。
onreadystatechange=function(){      
} 

readyState:服務(wù)器狀態(tài)響應(yīng)
狀態(tài)碼:
0:未初始化
1:正在加載
2:加載完成
3:請(qǐng)求進(jìn)行中
4:請(qǐng)求完成

responseText:服務(wù)器返回的數(shù)據(jù)(文本格式)
responseXML:服務(wù)器返回的數(shù)據(jù)(XML格式) 

總結(jié):
 使用XMLHttpRequest的步驟:
   1)創(chuàng)建XMLHttpRequest對(duì)象
   2)設(shè)置請(qǐng)求的方法及URL
    xhr.open("GET/POST","url",true/false),true表示異步請(qǐng)求,false表示同步請(qǐng)求
   3)設(shè)置狀態(tài)改變時(shí)的回調(diào)函數(shù)
     xhr.onreadystatechange=function(){}
    0:未初始化
     1:正在加載
     2:加載完成
     3:請(qǐng)求進(jìn)行中
     4:請(qǐng)求完成
   4)發(fā)送請(qǐng)求
     xhr.send(data),
    如果為post提交,則data為提交的數(shù)據(jù),如果為get提交,則參數(shù)為null即可。

判斷用戶登錄的HTML頁(yè)面:

%@ 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;
  /**
  * 創(chuàng)建XMLHttpRequest對(duì)象
  */
 function createXMLHttpRequest(){
  //1、創(chuàng)建XMLHttpRequest對(duì)象
    if(window.XMLHttpRequest){
      //非IE內(nèi)核瀏覽器
     xhr=new XMLHttpRequest(); 
    }else{
      //IE瀏覽器
      try{
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
      }catch(e){
       //IE低版本
        xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
      }
    }
 }
  
  /**
  * 發(fā)送請(qǐng)求,用來(lái)檢查用戶名、密碼是否正確
  */
  function chkUser(){
    
    //1、創(chuàng)建XMLHttpRequest
    createXMLHttpRequest();
    
    //2、獲得用戶名、密碼
    var username=document.getElementById("username").value;
    var password=document.getElementById("password").value;
    
    //3、與服務(wù)器建立連接:open
    var url="login?username="+username+"password="+password;
    //方式1:get提交
    //xhr.open("GET",url,true);
    
    //方式2:post提交
    var url2="login";
    xhr.open("POST",url2,true);
    
    
    //4、設(shè)置回調(diào)函數(shù),獲得服務(wù)器響應(yīng)的數(shù)據(jù)
    xhr.onreadystatechange=function(){
      /*
      readyState狀態(tài)碼:
      0:未初始化
      1:正在加載
      2:加載完成
      3:請(qǐng)求進(jìn)行中
      4:請(qǐng)求完成
      */
      if(xhr.readyState==4){
        //status,200表示響應(yīng)正常
        if(xhr.status==200){
         //alert("從服務(wù)器返回的值為:"+xhr.responseText);
         var res=xhr.responseText;
         if(res=='0'){
           document.getElementById("res").innerHTML="登錄成功";
         }else{
           document.getElementById("res").innerHTML="font color='red'>登錄失敗/font>";
         }
         
        }else{
          alert("出現(xiàn)在了異常:"+xhr.response.Text);
        }
        
      }
    }
    //5、發(fā)送請(qǐng)求
    //方式1:get方式
    //xhr.send(null);
    
    //方式2:post方式:
    //Post提交需要設(shè)置http請(qǐng)求頭
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("username="+username+"password="+password);
    
    
  }
 
/script>

/html> 

服務(wù)端代碼: 

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、獲得頁(yè)面參數(shù)
    String username = request.getParameter("username");
    String password = request.getParameter("password");

    System.out.println("獲得請(qǐng)求的參數(shù)username:"+username);
    System.out.println("獲得請(qǐng)求的參數(shù)password:"+password);    
    // 2、封裝User對(duì)象
    User user = new User();
    user.setUsername(username);
    user.setPassword(password);

    // 3、調(diào)用服務(wù)類,完成用戶名、密碼的校驗(yàn)
    User u = userService.login(user);

    /*
     * 傳統(tǒng)方式 if(u!=null){ //表示登錄成功 request.setAttribute("user", user);
     * //跳轉(zhuǎn)至首頁(yè)... }else{ //登錄失敗,跳轉(zhuǎn)登錄頁(yè)面
     * 
     * }
     */
    // ajax響應(yīng)

    PrintWriter out = response.getWriter();

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

  }

}

您可能感興趣的文章:
  • ajax 技術(shù)和原理分析
  • jQuery之a(chǎn)jax技術(shù)的詳細(xì)介紹
  • Ajax技術(shù)(WEB無(wú)刷新提交數(shù)據(jù))-
  • php+ajax實(shí)現(xiàn)無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
  • Tab頁(yè)界面,用jQuery及Ajax技術(shù)實(shí)現(xiàn)
  • Javascript異步表單提交,圖片上傳,兼容異步模擬ajax技術(shù)
  • 利用ThinkPHP內(nèi)置的ThinkAjax實(shí)現(xiàn)異步傳輸技術(shù)的實(shí)現(xiàn)方法
  • 落伍首發(fā) php+mysql 采用ajax技術(shù)的 省 市 地 3級(jí)聯(lián)動(dòng)無(wú)刷新菜單 源碼
  • 使用ajax技術(shù)無(wú)刷新動(dòng)態(tài)調(diào)用新浪股票實(shí)時(shí)數(shù)據(jù)
  • 不用AJAX和IFRAME,說(shuō)說(shuō)真正意義上的ASP+JS無(wú)刷新技術(shù)

標(biāo)簽:蚌埠 萍鄉(xiāng) 大理 衡水 衢州 棗莊 廣元 江蘇

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Ajax技術(shù)組成與核心原理分析》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    呼图壁县| 安西县| 苏尼特左旗| 恭城| 包头市| 铁岭市| 广西| 宝兴县| 盐边县| 北安市| 水富县| 鞍山市| 陆良县| 丰镇市| 齐河县| 涿鹿县| 营口市| 义马市| 千阳县| 敦煌市| 康保县| 孝义市| 侯马市| 泰宁县| 夏津县| 青州市| 大田县| 定陶县| 勃利县| 河北省| 秦皇岛市| 武清区| 绥江县| 湄潭县| 广东省| 莆田市| 咸阳市| 湖口县| 临高县| 白银市| 关岭|