Ajax 代码模板：
清单一：index.jsp 代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var xmlHttp;
function verify(){
var username=document.getElementById("username").value;
try {
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
} catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
} catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("您的浏览器不支持AJAX！");
return false;
}
}
}
//注册回调函数
xmlHttp.onreadystatechange=callback;
//设置连接信息
var url = encodeURI(encodeURI("check?username="+username)); //页面端两次encodeURI
//xmlhttp.setRequestHeader( "Content-Type", "text/html;charset=UTF-8" );//设置编码
xmlHttp.open("GET",url,true);
//发送数据，开始与服务器端交互
xmlHttp.send(null);
}
//回调函数代码如下：
function callback(){
//判断交互是否完成
if(xmlHttp.readyState==4){
//判断http的交互是否成功
if(xmlHttp.status==200){
//获取服务器端的纯文本数据
var responseText=xmlHttp.responseText;
document.getElementById("show").innerHTML=responseText;
}else{
alert("出错了");
}
}
}
</script>
</head>
<body>
<form action="" >
用户名： <input type="text" name="username" onBlur="verify();" id="username"><div id="show"></div><br>
密码： <input type="text" name="password"><br>
<input type="submit">
</form>
</body>
</html>
清单二：Servlet代码
package com.asm.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String username = URLDecoder.decode(request.getParameter("username"),
"UTF-8");
PrintWriter out = response.getWriter();
out.write("你输入的用户名为：<font color='red'>" + username+"</font>");
}
}
分享到：
相关推荐
"Ajax中Get和Post请求的区别" Ajax作为异步JavaScript和XML的简写，是一种创建交互式网页的技术。其中，Get和Post是两种常用的HTTP请求方法，尽管它们都是用于将数据从客户端发送到服务器端，但是它们之间存在着很...
Ajax 中 get 与 post 请求的详细解释 Ajax 技术中 get 与 post 两种请求方式是许多开发者经常遇到的疑问，以下将详细解释两者的区别，并提供实例代码。 一、get 与 post 的基本区别 1. 参数传递方式：get 请求将...
而Jquery库提供了一系列封装好的Ajax函数，如$.get(), $.post(), $.ajax(), 和$.getJSON()，这些函数简化了前端开发者与后端数据交互的过程。 ### 1. $.get() `$.get()`函数是最简单的一种异步请求方式，它发送一...
This completely updated second edition covers everything you need to know to get up-to-speed with JavaScript development and add dynamic enhancements to web pages, right from the basics. As well as ...
在这个教程中，我们将深入探讨AJAX的GET和POST提交方式，以及它们在实现用户名搜索功能时的区别，同时也会解决可能出现的中文乱码问题和缓存问题。 首先，GET和POST是HTTP协议中的两种主要请求方法，它们在AJAX中...
ajax总结，load，get,post,ajax总结，还有formdata~~~
6. **jQuery和Ajax**：jQuery库简化了Ajax的使用，书中可能包含jQuery的Ajax方法，如$.ajax()、$.get()、$.post()等，并展示如何结合jQuery进行Ajax开发。 7. **Ajax应用实例**：通过具体的网页应用示例，如动态...
在Ajax中，主要使用的请求方式有两种：GET和POST。 **GET请求** GET是HTTP协议中最常见的请求方法之一，主要用于获取服务器上的资源。在Ajax中，使用GET请求时，请求的数据会被附加到URL后面，以问号分隔，形成一个...
### AJAX POST 与 GET 提交的区别详解 #### 一、GET与POST基本概念及应用场景 在探讨AJAX中GET和POST的区别之前，我们先来了解一下这两种请求方式的基本概念。 **GET**请求通常用于获取资源信息，它将参数拼接到...
### AJAX GET 请求解析 #### 一、概述 Ajax（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术，它能够使网页实现局部刷新，而无需重新加载整个页面。本篇文章将通过一个具体的示例来深入分析 ...
jsp+ajax 发送 GET 请求的方法 本文主要介绍了 jsp+ajax 发送 GET 请求的方法，包含了 Ajax 数据的发送与 JSP 文件的处理技巧。下面是详细的知识点： 一、Ajax 发送 GET 请求 Ajax 发送 GET 请求是通过创建 ...
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新，提升了用户体验，使得用户在等待数据...
在进行Web开发时，我们经常会遇到Ajax GET请求发送中文参数时出现乱码的问题。这个问题主要源于HTTP协议在处理非ASCII字符时的编码不一致。在本文中，我们将深入探讨这个问题，以及如何通过不同的方法来解决它。 ...
- GET和POST请求的发送 - 异步处理与回调函数 3. **第三章：处理响应** - 解析XML和JSON数据 - DOM操作与动态内容插入 - 错误处理和状态监测 4. **第四章：提升用户体验** - 使用Ajax进行页面局部更新 - ...
#### 5.1 引入Ajax：GET与POST方法的选择 在Web开发中，表单是用户与服务器进行交互的重要手段之一。传统的表单提交通常采用GET或POST方法。这两种方法各有优缺点，在使用Ajax技术时，我们需要更加细致地考虑这两种...
本文将详细讲解如何使用Ajax以GET和POST方式调用WCF服务，包括带参数和不带参数的情况。 首先，我们需要理解Ajax的基本原理。Ajax通过JavaScript创建XMLHttpRequest对象，然后利用这个对象与服务器进行异步通信。...
本文将介绍JSP结合Ajax技术通过GET方法发送请求的详细步骤和实现方法，该技术在数据请求和处理方面非常实用，尤其适用于需要在用户界面交互中实时校验数据的场景。 首先，我们创建一个简单的注册表单页面，页面中...
$.get()和$.post()方法 、 $.getScript()和$.getJson() 、 $.ajax()方法 、 序列化元素 、 jQuery中的Ajax全局事件 这些都有详尽的例子，一看代码，你就能明白jquery里实现ajax是怎么回事了，简单明了。
### 精通AJAX：基础概念、核心技术与典型案例 #### 一、AJAX概述 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，...