`

JavaScript的Ajax请求示例

    博客分类：
  • Ajax
JavaScriptAjax 
阅读更多

以前利用Sencha，Dojo之类Web前端框架多了，由于它们都将Ajax请求封装好了，虽然用着方便，但是对于Js基本的Ajax请求却相当模糊，所以有必要做一下简要的Demo，以用来备忘。

Ajax请求示例1：

<html>  
<head>
    <title>Ajax示例</title>
    <script  language="javascript" type="text/javascript">
         //创建XMLHttpRequest对象
         var request = false;
         try {
             request = new XMLHttpRequest();
         }
         catch (trymicrosoft) {
             try {
                 request = new ActiveXObject("Msxml2.XMLHTTP");
             }
             catch (othermicrosoft) {
                 try {
                     request = new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch (failed) {
                     request = false;
                 }
             }
         }
         if (!request) alert("Error initializing XMLHttpRequest!");

         //获取信息
         function getInfo() {
             var url = "TheServlet.aspx?sid=" + Math.random() + "&q=juven";
             request.open("GET", url, true);
             request.onreadystatechange = updatePage;
             request.send(null);
         }

         //更新页面
         function updatePage() {
             if (request.readyState == 4) {
                 if (request.status == 200) {
                     var response = request.responseText;
                     document.getElementById("div1").innerText = response;
                 }
                 else if (request.status == 404) {
                     alert("Requested URL is not found.");
                 }
                 else if (request.status == 403) {
                     alert("Access denied.");
                 }
                 else alert("status is " + request.status);
             }
         }
    </script>
</head>
<body>
 <input name="btn" type="button" id="btn" value="get...." onclick="getInfo();" />
	<div id="div1"></div>
</body>
</html>

 

对应的TheServlet.aspx代码如下：

<%@ Page Language="C#" %>
<!-- <%@ Import Namespace="System.Net" %>  -->
<script runat="server">
    public void Page_Load(object sender, EventArgs e)
    {
        string astring = Request["q"];
        string bstring = Request["sid"];

        Response.Write("hey=="+bstring);
    }
</script>

 示例2：

<html>
  <head>
  <script type="text/javascript"> 
  	 var xmlHttp=null;
     function showHint(str){
	   if (str.length==0){ 
		    document.getElementById("txtHint").innerHTML="";
		    return;
	   }
	
	   xmlHttp=GetXmlHttpObject()
	   if (xmlHttp==null){
		    alert ("您的浏览器不支持AJAX！");
		    return;
	   }
	
		var url="TheServlet";
		url=url+"?q="+str;
		url=url+"&sid="+Math.random();
		xmlHttp.onreadystatechange = stateChanged;
		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
	} 
	
	function GetXmlHttpObject(){
	  var xmlHttp=null;
	  try
	    {
	    // Firefox, Opera 8.0+, Safari
	    xmlHttp=new XMLHttpRequest();
	    }
	  catch (e)
	    {
	    // Internet Explorer
	    try
	      {
	      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	      }
	    catch (e)
	      {
	      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	      }
	    }
	  return xmlHttp;
	}
	
	function stateChanged() 
	{ 
  		if (xmlHttp.readyState==4){ 
  			document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
  		}
	}     
  </script> 
  </head>
  <body> 
    <form> 
		First Name:<input type="text" id="txt1" onkeyup="showHint(this.value)" />
	</form>
	<p>Suggestions: <span id="txtHint"></span></p> 
  </body>
</html>

 对应的Servlet类代码如下：

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class TheServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		  System.out.println("get into doGet  of TheServlet");
		  
		  String aString = req.getParameter("q");
		  String bsString = req.getParameter("sid");
		  
		  resp.getWriter().write(""+bsString);
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		System.out.println("get into doPost  of TheServlet");
	}

}

 

分享到：
| 利用NIO建立Socket服务器
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Jquery跨域Ajax请求测试

    在"JqueryWebServiceTestDemo"这个示例中，可能包含了完整的前端HTML、CSS和JavaScript文件，以及可能的服务端接口文档或示例代码，用于演示如何在实际项目中运用jQuery进行跨域Ajax请求。通过学习和运行这个示例，...

    Ajax异步请求简单示例

    Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分...这个示例提供了一个基础的Ajax请求流程，实际应用中，可能需要考虑更多的细节，如错误处理、数据序列化、缓存策略等。

    实例详解Android Webview拦截ajax请求

    但是，在此强烈推荐一下 DSBridge，它是一个使用非常简单并支持同步的跨平台 JavaScript Bridge，最关键的是，DSBridge 的 demo 中就有接收处理 Fly.js 转发的 HTTP 请求的示例，并且给出了 OkHttp 的实现，并且，...

    ajax 纯JavaScript demo ajax示例

    在压缩包文件"ajaxBasicJavaScript"中，可能包含了一些基础的Ajax示例代码，这些代码可能涵盖了上述步骤的实现，用于展示如何使用JavaScript进行Ajax请求。通过学习和分析这些示例，你可以更好地理解Ajax的工作原理...

    一个实用了spring mvc和ajax异步请求的例子

    下面是一个简单的Ajax请求示例，使用jQuery库： ```javascript $.ajax({ url: '/api/posts', // 调用Spring MVC的URL type: 'GET', dataType: 'json', success: function(data) { // 更新DOM元素，显示返回的...

    Ext2.0.2的Ajax请求拦截示例

    本示例将深入探讨如何在Ext2.0.2中实现Ajax请求的拦截，以便在发送请求前或接收响应后执行自定义逻辑。 首先，我们需要了解Ext.Ajax，这是Ext JS中处理Ajax请求的核心对象。通过这个对象，我们可以配置请求参数，如...

    Ajax请求内嵌套Ajax请求示例代码

    Ajax请求内嵌套Ajax请求示例代码主要讲述的是在异步JavaScript与XML（Ajax）编程中，如何将两个XML文件（本例中为全国省市的XML文件）整合为一个JSON格式数据的过程。在这个过程中，开发者采取了嵌套Ajax请求的方法...

    HTML使用极简的方式通过ajax请求实现前后端交互代码实现

    jQuery是一个强大的JavaScript库，它简化了DOM操作，事件处理，动画效果以及，当然，包括AJAX请求。使用jQuery的$.ajax()函数，我们可以轻松地发起异步请求： ```javascript $.ajax({ url: 'your_server_endpoint'...

    ajax 简单示例

    这可能是一个HTML文件，其中包含用于触发Ajax请求的JavaScript代码。代码可能会这样编写： ```html &lt;!DOCTYPE html&gt; function sendAjaxRequest() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange ...

    Ajax详细示例

    - GET请求示例： ```javascript xhr.open('GET', 'data.txt', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; ...

    浏览器调试ajax请求

    本示例旨在帮助开发者调试针对Ajax请求的后台接口，确保它们能够正确处理跨域请求、支持Ajax方式并且能返回预期的数据。 首先，我们需要理解什么是跨域问题。由于浏览器的安全策略，同一源策略限制了JavaScript只能...

    服务器端判断Ajax请求

    - **Ajax请求示例**： - `Accept`: `*/*` - `Accept-Language`: `zh-cn` - `Referer`: `http://192.168.101.72:8080/scm/?token=3b194bff23bf6acecea5661ac8e14c51` - `X-Requested-With`: `XMLHttpRequest` - ...

    简单的JqueryAjax的示例

    下面是一个简单的jQuery AJAX请求示例，从服务器获取JSON数据并显示在页面上： ```html &lt;!DOCTYPE html&gt; &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; &lt;button id="loadData"&gt;Load ...

    Ajax异步请求的验证

    以下是一个简单的Ajax请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'data.json', true); // GET请求，替换为'data.json'为实际URL xhr.onreadystatechange = function() { if (xhr....

    使用springmvc整合ajax请求demo代码示例

    本示例将深入探讨如何在Spring MVC项目中整合Ajax请求，以提供更流畅的用户体验。 首先，让我们理解Ajax的核心概念。Ajax（Asynchronous JavaScript and XML）允许网页在不刷新整个页面的情况下与服务器交换数据并...

    ajax 示例源码（经典）

    3. **事件处理**：Ajax请求过程中有多个事件可以监听，例如`onreadystatechange`事件，当请求状态改变时触发。关键在于当`readyState`属性变为4（表示请求已完成）且`status`属性为200（表示成功）时，意味着我们...

    【Ajax示例】

    选择事件触发后，会调用预设的回调函数，执行Ajax请求。 5. **异步处理**：Ajax的异步特性使得用户可以在等待数据加载的同时继续操作页面，避免了传统方式下整个页面因等待服务器响应而冻结的情况。 6. **跨域问题...

    AJAX完美示例极强

    - JavaScript事件处理：监听用户行为，触发AJAX请求。 5. **学习路径**：首先，阅读`AjaxPro实例说明（入门）转 - my22xo的专栏 - CSDN博客.htm`了解AjaxPro的基础用法；然后，通过`DadaAJAX`项目实践，动手编写和...

    JS&AJAX代码示例

    以下是一个基本的AJAX请求示例： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.php', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === ...

    Ajax使用示例

    当用户触发一个Ajax请求时，JavaScript创建一个XMLHttpRequest对象，然后通过这个对象发送HTTP请求到服务器。服务器处理请求并返回数据，通常是JSON或XML格式。JavaScript接收数据后，可以动态地更新网页的部分内容...

Magicbox
Global site tag (gtag.js) - Google Analytics