ajax监听从发送到响应返回,Ajax发送GET、POST请求和响应XML数据案例

1、新建工程

新建一个java web工程，新建一个Servlet文件 AServlet.java,用于返回get和post请求。

public class AServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("Hello AJAX!");

response.getWriter().print("Hello AJAX!!!");

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

request.setCharacterEncoding("UTF-8");

String username = request.getParameter("username");//获取请求参数

System.out.println("(POST：) Hello AJAX!" + username);

response.getWriter().print("(POST：) Hello AJAX!!!" + username);

}

}

新建一个Servlet文件 BServlet.java,用于返回xml数据。

public class BServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String xml = "" +

"" +

"zhangSan" +

"18" +

"male" +

"" +

"";

response.setContentType("text/xml;charset=utf-8");

response.getWriter().print(xml);

}

}

2、GET请求案例

My JSP 'ajax1.jsp' starting page

// 创建异步对象

function createXMLHttpRequest() {

try {

return new XMLHttpRequest();//大多数浏览器

} catch (e) {

try {

return ActvieXObject("Msxml2.XMLHTTP");//IE6.0

} catch (e) {

try {

return ActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本

} catch (e) {

alert("哥们儿，您用的是什么浏览器啊？");

throw e;

}

}

}

}

window.onload = function() {//文档加载完毕后执行

var btn = document.getElementById("btn");

btn.onclick = function() {//给按钮的点击事件注册监听

/*

ajax四步操作，得到服务器的响应

把响应结果显示到h1元素中

*/

/*

1. 得到异步对象

*/

var xmlHttp = createXMLHttpRequest();

/*

2. 打开与服务器的连接

* 指定请求方式

* 指定请求的URL

* 指定是否为异步请求

*/

xmlHttp.open("GET", "", true);

/*

3. 发送请求

*/

xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！

/*

4. 给异步对象的onreadystatechange事件注册监听器

*/

xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行

// 双重判断：xmlHttp的状态为4(服务器响应结束)，以及服务器响应的状态码为200(响应成功)

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

// 获取服务器的响应结束

var text = xmlHttp.responseText;

// 获取h1元素

var h1 = document.getElementById("h1");

h1.innerHTML = text;

}

};

};

};

点击这里

GET请求案例JSP代码

3、POST请求案例

* open：xmlHttp.open("POST" ....);

* 添加一步：设置Content-Type请求头：

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

* send：xmlHttp.send("username=zhangSan&password=123");//发送请求时指定请求体

window.onload = function() {//文档加载完毕后执行

var btn = document.getElementById("btn");

btn.onclick = function() {//给按钮的点击事件注册监听

/*

ajax四步操作，得到服务器的响应

把响应结果显示到h1元素中

*/

/*

1. 得到异步对象

*/

var xmlHttp = createXMLHttpRequest();

/*

2. 打开与服务器的连接

* 指定请求方式

* 指定请求的URL

* 指定是否为异步请求

*/

/************修改open方法，指定请求方式为POST**************/

xmlHttp.open("POSt", "", true);

/************设置请求头：Content-Type************/

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

/*

3. 发送请求

*/

/**********发送时指定请求体***********/

xmlHttp.send("username=张三&password=123");//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！

/*

4. 给异步对象的onreadystatechange事件注册监听器

*/

xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行

// 双重判断：xmlHttp的状态为4(服务器响应结束)，以及服务器响应的状态码为200(响应成功)

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

// 获取服务器的响应结束

var text = xmlHttp.responseText;

// 获取h1元素

var h1 = document.getElementById("h1");

h1.innerHTML = text;

}

};

};

};

POST请求js代码

4、响应Xml数据

* 服务器端：

设置响应头：ContentType，其值为：text/xml;charset=utf-8

* 客户端：

var doc = xmlHttp.responseXML;//得到的是Document对象！

window.onload = function() {//文档加载完毕后执行

var btn = document.getElementById("btn");

btn.onclick = function() {//给按钮的点击事件注册监听

/*

ajax四步操作，得到服务器的响应

把响应结果显示到h1元素中

*/

/*

1. 得到异步对象

*/

var xmlHttp = createXMLHttpRequest();

/*

2. 打开与服务器的连接

* 指定请求方式

* 指定请求的URL

* 指定是否为异步请求

*/

xmlHttp.open("GET", "", true);

/*

3. 发送请求

*/

xmlHttp.send(null);//GET请求没有请求体，但也要给出null，不然FireFox可能会不能发送！

/*

4. 给异步对象的onreadystatechange事件注册监听器

*/

xmlHttp.onreadystatechange = function() {//当xmlHttp的状态发生变化时执行

// 双重判断：xmlHttp的状态为4(服务器响应结束)，以及服务器响应的状态码为200(响应成功)

if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {

// 获取服务器的响应结果(xml)

var doc = xmlHttp.responseXML;

// 查询文档下名为student的所有元素，得到数组，再取下标0元素

var ele = doc.getElementsByTagName("student")[0];

var number = ele.getAttribute("number");//获取元素名为number的属性值

var name;

var age;

var sex;

// 处理浏览器的差异

if(window.addEventListener) {

name = ele.getElementsByTagName("name")[0].textContent;//其他浏览器

} else {

name = ele.getElementsByTagName("name")[0].text;//IE支持

}

if(window.addEventListener) {

age = ele.getElementsByTagName("age")[0].textContent;//其他浏览器

} else {

age = ele.getElementsByTagName("age")[0].text;//IE支持

}

if(window.addEventListener) {

sex = ele.getElementsByTagName("sex")[0].textContent;//其他浏览器

} else {

sex = ele.getElementsByTagName("sex")[0].text;//IE支持

}

var text = number + ", " + name + ", " + age + ", " + sex;

document.getElementById("h1").innerHTML = text;

}

};

};

};

[IBM]掌握Ajax，Ajax中的高级请求和响应

掌握 Ajax, Ajax 中的高级请求和响应 http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html http://www.ibm.c ...

Ajax发送PUT/DELETE请求时出现错误的原因及解决方案

本文讲什么? 大家应该都知道.在HTTP中,规定了很多种请求方式,包括POST,PUT,GET,DELETE等.每一种方式都有这种方式的独特的用处,根据英文名称,我们能够很清楚的知道DELETE方法的 ...

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

【Go】优雅的读取http请求或响应的数据-续

原文链接:https://blog.thinkeridea.com/201902/go/you_ya_de_du_qu_http_qing_qiu_huo_xiang_ying_de_shu_ju_2 ...

【Go】优雅的读取http请求或响应的数据

[Go]优雅的读取http请求或响应的数据 原文链接:https://blog.thinkeridea.com/201901/go/you_ya_de_du_qu_http_qing_qiu_huo_ ...

Ajax编程(HTTP请求与响应及API)详解

AJAX编程 即 Asynchronous [e'sɪŋkrənəs] Javascript And XML, AJAX 不是一门的新的语言,而是对现有技术的综合利用. 本质是在HTTP协议的基础上以 ...

Ajax 中的高级请求和响应

一.概述 在本文中,重点介绍这个请求对象的 3 个关键部分的内容: 1.HTTP 就绪状态 2.HTTP 状态代码 3.可以生成的请求类型 这三部分内容都是在构造一个请求时所要考虑的因素:但是介绍这些 ...

请求json和xml数据时的方式

当请求xml数据时,直接通过NSMutableData接收后解析, NSURL *url = [NSURL URLWithString:PATH]; _receiveData = [[NSMutabl ...

Ajax发送和接收请求

首先Ajax的不刷新页面提交数据 基本上浏览器能接收的信息,Ajax都可以接收,ex:字符串,html标签,css标签,xml格式内容,json格式内容等等..... / ...

随机推荐

神奇的decimal，也许面试会问到哦~

这段时间忙的像狗一样,写博客的事情也就耽搁了,继续扯,为什么说decimal神奇呢,大家都知道decimal是基元类型,但是 这个decimal类型在IL中居然没有相应的IL指令,也就是说CLR根本不 ...

Android MonoGame坑记

1.Content 加载声音API错误: 2.TouchPanel.GetState()属于抢占式的,用一次后面不能继续使用,否则状态尚属第一次: 3.TouchPanel 坐标来自于硬件本身: 4. ...

paper 86：行人检测资源(上)综述文献【转载，以后使用】

行人检测具有极其广泛的应用:智能辅助驾驶,智能监控,行人分析以及智能机器人等领域.从2005年以来行人检测进入了一个快速的发展阶段,但是也存在很多问题还有待解决,主要还是在性能和速度方面还不能达到一个 ...

用 C# 如何判断数据库中是否存在一个值

选定一个列,比如用户编号列 //欲插入的用户编号string ll_userID="xxxxxxxx"; //查询此编号是否存在SqlCommand mycmd = new Sql ...

生成N个不重复的随机数(转)

有25幅作品拿去投票,一次投票需要选16幅,单个作品一次投票只能选择一次.前面有个程序员捅了漏子,忘了把投票入库,有200个用户产生的投票序列为空.那么你会如何填补这个漏子? 当然向上级反映情况.但是 ...

C#获取单个字符的拼音声母

public class ConvertToPinYing     {         ///         /// 汉字转拼音缩写         /// < ...

Java 比较两日期相差天数

(版本1) publicstaticint getIntervalDays(Date fDate, Date oDate) { if (null == fDate || null == oDate) ...

Linux Shell脚本攻略

-Linux Shell脚本攻略 总结的来说,这本书很实践性和实用性强,都是给的具体的例子,直接可以在终端操作实践,比单纯只看不动手务实多了,另外就是,这本书涵盖的内容也比较广,从文本操作到服务器管理 ...

1、下载LInux版的tomcat6

1.下载LInux版的tomcat6 http://mirror.bit.edu.cn/apache/tomcat/tomcat-6/v6.0.37/bin/apache-tomcat-6.0.37. ...

UVA - 10931-Parity

题意:1.输入一个数,将其转换为二进制.2.记录二进制中出现1的次数. 注意:转换二进制后直接输出,不能转换为十进制后输出 #include #include