以前利用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");
}
}
分享到：
相关推荐
JavaScript 调用wsdl示例，包含通过dot创建的ws示例
用javascript硬编码方式和jquery框架方式完成ajax异步请求的示例源码。直接访问方式是，可以直接在tomcat启动后访问helloAjaxDemo.jsp或是helloJQueryAjaxDemo.jsp。
AJAX 组成 1.表示 XHTML+CSS 2.动态显示和交互 DOM 3.数据交互和操作 XML、XSLT 4.异步数据获取 XMLHttpRequest 5.绑定和处理数据 JavaScript
用javascript硬编码方式和jquery框架方式完成ajax异步请求的示例，不包括源码。直接访问方式是，可以直接在tomcat启动后访问helloAjaxDemo.jsp或是helloJQueryAjaxDemo.jsp。比如：...
主要介绍了Javascript原生ajax请求代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
主要介绍了原生javascript的ajax请求及后台PHP响应操作,结合示例形式分析了JavaScript前台ajax请求的原理、调用、后台PHP响应请求及cookie保存相关操作技巧,需要的朋友可以参考下
ajax请求是一种无刷新式的用户体验，可以发送GET和POST两种异步请求，现记录如下： GET请求： function sendRequestByGet(){ //定义异步请求对象 var xmlReq; //检测浏览器是否直接支持ajax if(window....
工作之余写的一些Ajax应用，有6个Demo,数据库为mysql，使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
url: 发送请求的地址data : (可选) 待发送key/value参数callback: (可选) 载入成功时的回调函数主要用于客户端获取服务器JSON数据。简单示例： 服务器脚本，返回JSON数据： 代码如下:// $.getJSON.php$arr=array(...
url: 发送请求的地址 data : (可选) 待发送key/value参数 callback: (可选) 载入成功时的回调函数 主要用于客户端获取服务器JSON数据。简单示例： 服务器脚本，返回JSON数据： 代码如下: // $.getJSON.php $arr=...
多个ajax请求同时发送，相互无依赖。 多个ajax请求相互依赖，必须有先后顺序。 多个请求被同时发送，只需要最后一个请求。 1.情况1-多个ajax请求同时发送，相互无依赖 ajaxQueue1文件夹 ajaxQueue-requireJS //为...
这个jQuery插件创建了一种简单的方法来排队ajax请求，使它们能够按顺序执行，但仍异步运行。 当由于不安全/破坏性的POST / PUT / DELETE请求而试图处理应用程序中的竞争条件时，这可能非常有用。 例如，采取以下...
本文实例讲述了javascript跨域请求包装函数与用法。分享给大家供大家参考，具体如下： 一、源码 // 定义AJAX跨域请求的JSON (function(){ if(typeof window.$JSON== 'undefined'){ window.$JSON= {}; }; $JSON....
7.1.3 使用xmlhttprequest调试用户脚本检查ajax请求和响应 186 7.2 调试javascript 188 7.2.1 使用firefox javascript console 189 7.2.2 使用microsoft script debugger 190 7.2.3 使用venkman 192 7.3 小结 ...
介绍了各种请求类型，给出了具有一定深度的有关如何以及何时在Web 站点或Web 应用程序中使用Ajax 的示例，以及各种数据传输格式及其优缺点；介绍了较为复杂的请求管理框架和Ajax 调试技术；讲述了两个完整的AjaxWeb ...
每隔5分钟执行一次ajax请求，如何实现？下面有个不错的示例，感兴趣的朋友可以参考下
本例是从前端，以Ajax的形式向豆瓣RESTFul服务器发起请求的简单示例。