zoukankan      html  css  js  c++  java
  • AJAX

    /**Ajax 编写流程
    * 1、创建 XHR (XMLHttpRequest)对象

     1 var xmlHttpReq = false; // var xmlHttpReq = "";       数据类型改变--弱类型
     2 //Part1:创建 [一个函数,初始化] XHR 对象--->是 Ajax的基础
     3 function createXmlHttpRequest() {
     4     /**这里要完成两个步骤:
     5      * 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的  XHR  是如何初始化的
     6      * 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的
     7      **/
     8     if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR
     9         xmlHttpReq = new XMLHttpRequest();
    10     }else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest 
    11         try{ // 所有现代浏览器均支持 XHR 对象(IE5 和 IE6 使用 ActiveXObject)。
    12             xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    13         }catch(e){
    14             console.log("=====Fail======");
    15         }
    16     }
    17 }

    * 2、利用XHR发送Ajax请求

    * 3、写一个回调函数来解析服务器端返回的数据

    * 4、把数据渲染到HTML页面上

     1 //Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法
     2 function sendRequest(url, params){
     3     // 1创建 XMLHttpReq对象(先调用,使xmlHttpReq初始化)
     4     createXmlHttpRequest();
     5     // 2向服务器发送请求---->设置发送请求相关属性
     6     xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。
     7     xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2 设置Http请求头
     8     xmlHttpReq.send(params); // 2.3 将请求发送到服务器  发送数据
     9     // Part3 回调函数  处理服务器返回的数据
    10     xmlHttpReq.onreadystatechange = function() {
    11         if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){
    12             //Part4 数据解析---> 把数据渲染到HTML页面上
    13             // nodeValue 返回元素值
    14             var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue;
    15             window.alert(res);
    16         }
    17     }
    18 }

    完整代码如下:

    1.html文件

     1 <!-- 01_ajax.html -->
     2 <!DOCTYPE html>
     3 <html>
     4 <head>
     5 <meta charset="UTF-8">
     6 <title>Ajax案例</title>
     7 <script src="js/01_ajax.js"></script>
     8 
     9 </head>
    10 <body>
    11   <form action="" method="post">
    12     <p><label>账号:</label><input type="text" name="uname" id="uname"></p>
    13     <p><label>密码:</label><input type="password" name="upass" id="upass"></p>
    14     <p><input type="button" value="登录"  onclick="login()"></p>
    15   </form>
    16 </body>
    17 </html>
    01_ajax.html

    2.js文件

     1 /**Ajax编写流程
     2  * 1、创建 XHR (XMLHttpRequest)对象
     3  * 2、利用XHR发送Ajax请求
     4  * 3、学会写一个回调函数来解析服务器端返回的数据
     5  * 4、把数据渲染到HTML页面上
     6  */
     7 
     8 $ = function(obj){
     9     return document.getElementById(obj);
    10 }
    11 
    12 var xmlHttpReq = false; // var xmlHttpReq = "";       数据类型改变--弱类型
    13 //Part1:创建 [一个函数,初始化] XHR 对象--->是 Ajax的基础
    14 function createXmlHttpRequest() {
    15     /**这里要完成两个步骤:
    16      * 1.IE7+、FireFox、Chrome、Safari、Opera浏览器下的  XHR  是如何初始化的
    17      * 2.IE5、IE6 浏览器下的 XHR 有是如何初始化的
    18      **/
    19     if(window.XMLHttpRequest){ //IE7+、FireFox、Chrome、Safari、Opera下创建的 XHR
    20         xmlHttpReq = new XMLHttpRequest();
    21     }else if(window.ActiveXObject){ //IE5、IE6下创建的 XMLHttpRequest 
    22         try{ // 所有现代浏览器均支持 XHR 对象(IE5 和 IE6 使用 ActiveXObject)。
    23             xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    24         }catch(e){
    25             console.log("=====Fail======");
    26         }
    27     }
    28 }
    29 
    30 
    31 //Part2:利用XMLHttpRequest发送Ajax请求---->将请求发送到服务器 用 XHR 对象的 open() 和 send() 方法
    32 function sendRequest(url, params){
    33     // 1创建 XMLHttpReq对象(先调用,使xmlHttpReq初始化)
    34     createXmlHttpRequest();
    35     // 2向服务器发送请求---->设置发送请求相关属性
    36     xmlHttpReq.open("POST",url,true);// 2.1 规定请求的类型、URL 以及是否异步处理请求。
    37     xmlHttpReq.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 2.2设置Http请求头
    38     xmlHttpReq.send(params); // 2.3 将请求发送到服务器  发送数据
    39     // Part3 使用回调函数  处理服务器返回的数据
    40     xmlHttpReq.onreadystatechange = function() {
    41         if(xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200){
    42             // Part4 数据解析 ---> 把数据渲染到HTML页面上
    43             var res = xmlHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.nodeValue;  //   nodeValue 返回元素值
    44             window.alert(res);
    45         }
    46     }
    47 }
    48 
    49 // 登录点击事件方法
    50 function login(){
    51     var uname  = $("uname").value;
    52     var upass  = $("upass").value;
    53     var params = "uname=" + uname + "&upass=" + upass;
    54     sendRequest("01_ajax.do",params);
    55 }
    01_ajax.js

    3.java文件

     1 package com.lsy.ajaxtest1;
     2 
     3 import java.io.IOException;
     4 import java.io.PrintWriter;
     5 
     6 import javax.servlet.ServletException;
     7 import javax.servlet.annotation.WebServlet;
     8 import javax.servlet.http.HttpServlet;
     9 import javax.servlet.http.HttpServletRequest;
    10 import javax.servlet.http.HttpServletResponse;
    11 
    12 // 服务器端  ---> ervlet
    13 
    14 @WebServlet("/01_ajax.do")
    15 /*只要在Servlet上设置@WebServlet标注,容器就会自动读取当中的信息。上面的@WebServlet告诉容器,
    16   如果请求的URL是“/01_ajax.do”,则由HelloServlet的实例提供服务。可以使用@WebServlet提供更多信息*/
    17 public class AjaxServelet_01 extends HttpServlet {
    18 
    19     private static final long serialVersionUID = 4776153483702612333L;
    20     
    21     /**服务器端要做怎样的操作
    22      * 1、获得数据(请求)
    23      * 2、返回数据(响应)
    24      **/    
    25     @Override
    26     protected void doPost(HttpServletRequest request,HttpServletResponse response) 
    27             throws ServletException,IOException {
    28         request.setCharacterEncoding("utf-8");  //请求的中文处理
    29         response.setCharacterEncoding("utf-8"); //响应的中文处理
    30         response.setContentType("text/xml;charset=utf-8"); //响应类型的设置
    31         PrintWriter out = response.getWriter(); //输出流(字符流),输出xml格式数据
    32         
    33         String uname = request.getParameter("uname");
    34         String upass = request.getParameter("upass");
    35         
    36 //        System.out.println(uname + "---" + upass);
    37 //        String xml = "<response><res>欢迎光临...</res></response>";
    38         StringBuffer xml = new StringBuffer();
    39         xml.append("<response>");
    40         if("zs".equals(uname) && "123".equals(upass)) {
    41             xml.append("<res>欢迎光临...</res>");
    42         }else {
    43             xml.append("<res>输入信息有错!</res>");
    44         }
    45         xml.append("</response>");
    46         out.println(xml.toString());
    47         out.flush();
    48         out.close(); //输出流关闭
    49     }
    50 }
    AjaxServelet_01.java
  • 相关阅读:
    BF算法和KMP算法
    Python课程笔记 (五)
    0268. Missing Number (E)
    0009. Palindrome Number (E)
    0008. String to Integer (atoi) (M)
    0213. House Robber II (M)
    0198. House Robber (E)
    0187. Repeated DNA Sequences (M)
    0007. Reverse Integer (E)
    0006. ZigZag Conversion (M)
  • 原文地址:https://www.cnblogs.com/sylys/p/11554956.html
Copyright © 2011-2022 走看看