zoukankan      html  css  js  c++  java

  • AJAX.basic

    之前在项目中使用ajax都是通过jQuery的Ajax API来进行的，今天试了一下通过基本的JavaScript来进行ajax请求，将代码记录下来：

    jsp 页面
    [xhtml] view plain copy
    1. <%@ page pageEncoding="UTF-8"%>    
    2.     
    3. >    
    4. <html>    
    5.   <head>    
    6.     <title>Ajaxtitle>    
    7.     <script type="text/javascript" src="media/js/jquery.js" mce_src="media/js/jquery.js">script>    
    8.     <script type="text/javascript" src="media/ajax.js" mce_src="media/ajax.js">script>    
    9.   head>    
    10.       
    11.   <body>    
    12.     Ajax.jsp<br/>    
    13.     <div id="msg" style="400px;height:200px;margin:1em;padding:1em;border:1px solid #DD6900">    
    14.     啦啦啦    
    15.     div>    
    16.     <button id="start" style="margin:1em;border:1px solid #DD6900" mce_style="margin:1em;border:1px solid #DD6900">Start Ajaxbutton>    
    17.   body>    
    18. html>  
    进行ajax请求的js 代码，可以附带一些json和xml数据（必须是post方法）
    [javascript] view plain copy
    1. var xmlHttp;    
    2. function createXMLHttpRequest() {    
    3.     if (window.ActiveXObject) {    
    4.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");    
    5.     }    
    6.     else if (window.XMLHttpRequest) {    
    7.         xmlHttp = new XMLHttpRequest();    
    8.     }    
    9. }    
    10. var okFunc = function(){    
    11.     if(xmlHttp.readyState == 4) {    
    12.         if(xmlHttp.status == 200) {    
    13.             $("#msg").html(xmlHttp.responseText);    
    14.         }    
    15.     }    
    16. }    
    17. var startAjax = function(){    
    18.     $("#msg").html("Loading...");    
    19.     createXMLHttpRequest();    
    20.     if( !xmlHttp){    
    21.         return alert('create failed');    
    22.     }    
    23.     xmlHttp.open("POST", "Test", true);    
    24.     xmlHttp.onreadystatechange = okFunc;    
    25.     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    
    26.     xmlHttp.send(document);    
    27. }    
    28. $(document).ready(function(){    
    29.     $("#start").click(startAjax);    
    30.     $.post("Test",{'name':'Hello','age':22});    
    31. });  
     

    在服务器端的Servlet：

    java 代码
    [java] view plain copy
    1. package ajax;    
    2.     
    3. import java.io.BufferedReader;    
    4. import java.io.IOException;    
    5. import java.io.PrintWriter;    
    6.     
    7. import javax.servlet.ServletException;    
    8. import javax.servlet.http.HttpServlet;    
    9. import javax.servlet.http.HttpServletRequest;    
    10. import javax.servlet.http.HttpServletResponse;    
    11.     
    12. public class Test extends HttpServlet {    
    13.     public void doGet(HttpServletRequest request, HttpServletResponse response)    
    14.             throws ServletException, IOException {    
    15.         BufferedReader reader = request.getReader();    
    16.         String line = null;    
    17.         while((line = reader.readLine()) != null) {    
    18.             System.out.println(line);    
    19.         }    
    20.         System.out.println("Start writing");    
    21.         response.setContentType("text/html");    
    22.         PrintWriter out = response.getWriter();    
    23.         out.println(");    
    24.         out.flush();    
    25.         out.close();    
    26.     }    
    27.     
    28.     @Override    
    29.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)    
    30.             throws ServletException, IOException {    
    31.         doGet(req, resp);    
    32.     }    
    33.         
    34. } 
  • 相关阅读:
    webpack 5 之持久化缓存
    前端资源加载失败优化
    如何用 JS 实现二叉堆
    简单解析一下扫码登陆原理，简单到你想不到！
    实战：Express 模拟 CSRF 攻击
    Yarn 的 Plug&#39;n&#39;Play 特性
    为什么现在我更推荐 pnpm 而不是 npm/yarn?
    小米3移动版刷安卓6.0-小米手机3 移动版 Flyme 6.7.11.24R beta
    小米5手机最后一版安卓6.0 MIUI8 6.11.10 小米5s手机最后一版安卓6.0 MIUI8 7.6.8
    vim格式转换
  • 原文地址：https://www.cnblogs.com/SZLLQ2000/p/6923286.html
Copyright © 2011-2022 走看看