java 版 ajax 入门-白红宇

java 版 ajax 入门

阅读量：4538 次

发布时间：2019-06-08

本文共 10446 字，大约阅读时间需要 34 分钟。

1, index.jsp 页面

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

<!--

-->

function loadUrl(url)

{

if(window.XMLHttpRequest)

{

try

{

req=new XMLHttpRequest();

}

catch(e)

{

req=false;

}

else if(window.ActiveXObject)

{

try

{

req=new ActiveXObject('Msxml2.XMLHTTP');

}

catch(e)

{

try

{

req=new ActiveXObject('Microsoft.XMLHTTP');

}

catch(e)

{

req=false;

}

if(req)

{

req.onreadystatechange=processReqChange;

req.open('get',url,true);

req.send('');

}

function processReqChange()

{

if(req.readyState==4 && req.status==200)

{

alert(req.responseText);

}

//第一种方法采用get 提交到 jsp,采用最原始的AJAX 调用

function tj(){

loadUrl("<%=basePath%>/server.jsp?aa="+document.getElementById('txtinput').value);

//该页面路径的其他写法 /riskprj/server.jsp ，<%=path%>/server.jsp

}

//下面的方法采用AJAX 框架 Jquery

//1,get提交到jsp

function tj1(){

var url="/riskprj/server.jsp";

var result=document.getElementById('txtinput').value;

$.get(url,{aa:result},function(data){

alert(data);

});

}

//2,get提交到servlet

function tj2(){

var url="/riskprj/servlet/ajaxserver";

var result=document.getElementById('txtinput').value;

$.get(url,{aa:result},function(data){

alert(data);

});

}

//3,post 提交到servlet

function tj3(){

var url="/riskprj/server.jsp";

var result=document.getElementById('txtinput').value;

$.post(url,{aa:result},function(data){

alert(data);

});

}

//4,post 提交到servlet

function tj4(){

var url="/riskprj/servlet/ajaxserver";

var result=document.getElementById('txtinput').value;

$.post(url,{aa:result},function(data){

alert(data);

});

}

//5,get 提交到servlet,要求服务器端返回 xml

function tj5(){

var url="/riskprj/servlet/jservlet";

var result=document.getElementById('txtinput').value;

$.get(url,{aa:result},function(data){

var dtable=document.getElementById('tshow');

var nl = data.getElementsByTagName('book');

for( var i = 0; i < nl.length; i++ )

{

var nli=nl.item(i);

var eauthor=nli.getElementsByTagName('author');

var author=eauthor.item(0).firstChild.nodeValue;

var etitle=nli.getElementsByTagName('title');

var title=etitle.item(0).firstChild.nodeValue;

var elTr = dtable.insertRow(-1);

var elAuthorTd = elTr.insertCell(-1);

elAuthorTd.innerHTML = author;

var elTitleTd = elTr.insertCell(-1);

elTitleTd.innerHTML = title;

}

});

}

//6,post 提交到servlet,要求服务器端返回 json

function tj6(){

var url="/riskprj/servlet/jservlet";

var result=document.getElementById('txtinput').value;

$.post(url,{aa:result},function(data){

var dtable=document.getElementById('tshow');

var books = eval(data);

for(var b in books)

{

var elTr = dtable.insertRow( -1 );

var elAuthorTd = elTr.insertCell( -1 );

elAuthorTd.innerHTML = books[b].author;

var elTitleTd = elTr.insertCell( -1 );

elTitleTd.innerHTML = books[b].title;

}

});

}

//7,post 提交到jsp,要求服务器端返回 xml，json 针对特殊字符的处理

function tj7(){

var url="/riskprj/server.jsp";

var result=document.getElementById('txtinput').value;

$.post(url,{aa:result},function(data){

var dtable=document.getElementById('tshow');

var nl = data.getElementsByTagName('book');

for( var i = 0; i < nl.length; i++ )

{

var nli=nl.item(i);

var eauthor=nli.getElementsByTagName('author');

var author=eauthor.item(0).firstChild.nodeValue;

var etitle=nli.getElementsByTagName('title');

var title=etitle.item(0).firstChild.nodeValue;

var elTr = dtable.insertRow(-1);

var elAuthorTd = elTr.insertCell(-1);

elAuthorTd.innerHTML = author;

var elTitleTd = elTr.insertCell(-1);

elTitleTd.innerHTML = title;

}

});

}

// 不管是get 提交，还是post 提交，服务端都是 request.getParameter("aa") 解释参数

// 有的地方提交到action ,把 action 当作 servlet 来用，完全没有必要

// 至于返回 XML，字符串，或者 JSON ，客户端如何处理，见 NET 版 ajax 入门

// 这里主要是讲服务器端如何生成XML，JSON,以及需要注意的地方 &,<,' 3个符号

</script>

</head>

<body>

<form id="index" name="index" action="<%=path%>/login.do" method="post">

<div>

<tr>

</tr>

</tbody>

</table>

</div>

</form>

</body>

</html>

2， server.jsp 页面

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<%@ page import="java.sql.*" %>

<%@ page import="dbaccess.dbdao" %>

//如果连接到数据库，只需要把 &，< 替换掉

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

String xmlstr = "<books>";

//我倒，竟然把这里写错了，"jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=Northwind"

dbdao dd=dbdao.instance("com.microsoft.jdbc.sqlserver.SQLServerDriver", "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=Northwind", "sa", "sa");

ResultSet rs=dd.query("select a,b from t");

while(rs.next()){

xmlstr += "<book><author>" + rs.getInt("a") + "</author><title>" +rs.getString("b").replace("&","&").replace("<","<")+"</title></book>";

}

xmlstr=xmlstr+"</books>";

out.println(xmlstr);

out.flush();

out.close();

<!-- JSON

//JSON 支持 & ,@#￥%……×（）——+|，。、《》？；‘：“

//JSON 支持 <

//JSON 遇到 ' 只需要 \\' 转义一下

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

String jsstr = "["+

"{ author: '天山寒&@#￥%……×（）——+|，。、《》？；‘：“雪[1]E520', title: '互联网' },"+

"{ author: '天山<寒雪>[2]E520', title: '软件开发' },"+

"{ author: '天山\\'寒雪[3]E', title: '音乐' }"+

"]";

out.println(jsstr);

out.flush();

out.close();

-->

<!-- XML

// XML 不支持 < ，解决办法---<

// XML 不支持 & ，解决办法---&

// XML 如果遇到 " 只需要 \" 转义一下

// XML 不支持 <![CDATA[ ]]

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

String xmlstr = "<?xml version=\"1.0\" encoding=\"utf-8\" ?>"+

"<books>"+

"<book>"+

"<author>联系@#￥%……×（）——+|，。、《》？；‘：“方式[1]:</author>"+

"<title>QQ:757015000</title>"+

"</book>"+

"<book>"+

"<author>联系<方式[2]:</author>" +

"<title>MSN:haijun.qin@hotmail.com</title>"+

"</book>"+

"<book>"+

" <author>联系&方式[3]:</author>" +

" <title>Email:haijun.qin@gmail.com</title>"+

"</book>"+

"</books>";

out.println(xmlstr);

-->

<!--

//设置输出信息的格式及字符集

//如果连接到数据库，只需要把 ' 替换掉 '

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

String xmlstr = "[";

dbdao dd=dbdao.instance("com.microsoft.jdbc.sqlserver.SQLServerDriver", "jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=Northwind", "sa", "sa");

ResultSet rs=dd.query("select a,b from t");

while(rs.next()){

xmlstr += "{author:'" + rs.getInt("a") + "',title:'" +rs.getString("b").replace("'","'")+"'},";

}

xmlstr=xmlstr.substring(0,xmlstr.length()-1);

xmlstr=xmlstr+"]";

out.println(xmlstr);

out.flush();

out.close();

-->

3，ajaxserver.java

package server;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ajaxserver extends HttpServlet {

/**

* Constructor of the object.

public ajaxserver() {

super();

}

/**

* Destruction of the servlet. <br>

public void destroy() {

super.destroy(); // Just puts "destroy" string in log

// Put your code here

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println(request.getParameter("aa"));

out.flush();

out.close();

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html");

PrintWriter out = response.getWriter();

out.println(request.getParameter("aa"));

out.flush();

out.close();

}

/**

* Initialization of the servlet. <br>

* @throws ServletException if an error occure

public void init() throws ServletException {

// Put your code here

}

4，jservlet.java

package server;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class jservlet extends HttpServlet {

/**

* Constructor of the object.

public jservlet() {

super();

}

/**

* Destruction of the servlet. <br>

public void destroy() {

super.destroy(); // Just puts "destroy" string in log

// Put your code here

}

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

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

PrintWriter out = response.getWriter();

//针对特殊字符的处理

String xmlstr="<books> "+

"<book>"+

"<author>联系方式[1]:</author>"+

"<title>QQ:757015000</title>"+

"</book>"+

"<book>"+

"<author>联系方式[2]:</author>" +

"<title>MSN:haijun.qin@hotmail.com</title>"+

"</book>"+

"<book>"+

" <author>联系方式[3]:</author>" +

" <title>Email:haijun.qin@gmail.com</title>"+

"</book>"+

"</books>";

out.println(xmlstr);

out.flush();

out.close();

}

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

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

PrintWriter out = response.getWriter();

// 针对特殊字符的处理

String jsstr = "[ { author: '天山', title: '互联网' },"+

"{ author: '寒雪', title: '软件开发' },"+

"{ author: '天山寒雪', title: '音乐' }"+

"]";

out.println(jsstr);

out.flush();

out.close();

}

/**

* Initialization of the servlet. <br>

* @throws ServletException if an error occure

public void init() throws ServletException {

// Put your code here

}

转载于:https://www.cnblogs.com/qinhaijun/archive/2011/08/26/2154378.html

你可能感兴趣的文章

java 输入

查看>>

【Windows】Windows中解析DOS的for命令使用

查看>>

MVC3: 页面向服务传参（view->controller，get,post）

查看>>

vs2008 卡一下的问题

查看>>

Windows Socket五种I/O模型——代码全攻略

查看>>

多线程相关

查看>>

处理并解决mysql8.0 caching-sha2-password问题

查看>>

JavaScript 之对象/JSON/数组

10.9做的一个静态页面（巩固前面的内容）

Using Perl in Oracle 11gR2 Database

查看>>

Rabel 1.3.9 发布，让论坛回归交流本质

查看>>

Mac 安装brew和安装composer

查看>>