Ajax
AJAX代表异步JavaScript和XML。AJAX是一种借助XML，HTML，CSS和Java Script创建更好，更快，更交互的Web应用程序的新技术。
- Ajax使用XHTML作为内容，CSS使用文档对象模型和JavaScript进行动态内容显示。
- 传统的Web应用程序使用同步请求向服务器和从服务器发送信息。用户填写表单，点击提交，然后从服务器获取包含新信息的新页面。
- 使用AJAX，当点击提交时，JavaScript将向服务器发出请求，响应结果并更新当前屏幕从最纯粹的意义上讲，用户永远不会知道任何东西传输到服务器。
- XML通常用作接收服务器数据的格式，但可以使用任何格式(包括JSON和纯文本等)。
- AJAX是一种独立于Web服务器软件的Web浏览器技术。
- 当客户端程序在后台请求来自服务器的信息时，用户可以继续使用该应用程序。
- 直观和自然的用户交互。单击不是必需的，鼠标移动是一个足够的事件触发器。
- 数据驱动而不是页面驱动。
富Internet应用技术
到目前为止，AJAX是最可行的富Internet应用程序(RIA)技术。 它正在获得巨大的行业动力，并且正在出现一些工具包和框架。 但与此同时，AJAX具有浏览器不兼容性，它受JavaScript支持，难以维护和调试。
AJAX基于开放标准
AJAX基于以下开放标准 -
- 使用HTML和层叠样式表(CSS)的基于浏览器的演示文稿。
- 数据以XML格式存储并从服务器获取。
- 在浏览器中使用XMLHttpRequest对象获取幕后数据。
- JavaScript让一切都有可能。
XMLHttpRequest对象用于客户端和服务器之间的异步通信。
它执行以下操作：
- 从客户端发送数据到服务器后台。
- 从服务器接收数据。
- 更新网页而不需要重新加载页面。
XMLHttpRequest对象的属性
XMLHttpRequest对象的常见属性如下：
onReadyStateChange- 只要readystate属性发生变化，就会调用它。它不能与同步请求一起使用。readyState- 表示请求的状态。范围值从0到4。0- 未打开，未调用open()。1- 已打开，调用open()但不调用send()。2- 标头已接收, 调用send()，并且标题和状态可用。3- 已加载正在下载数据。responseText保存数据。4- 完成，操作完全完成。
reponseText- 以文本形式返回响应。responseXML- 以XML形式返回响应。
XMLHttpRequest对象的方法
XMLHttpRequest对象的重要方法如下：
| 方法 | 描述 |
|---|---|
void open(method, URL) |
打开指定get或post方法和url的请求。 |
void open(method, URL, async) |
与上面相同，但指定异步或不。 |
void open(method, URL, async, username, password) |
与上面相同，但指定用户名和密码。 |
void send() |
发送获取请求。 |
void send(string) |
发送邮件请求。 |
setRequestHeader(header,value) |
它添加了请求标头。 |
AJAX如何工作
AJAX使用XMLHttpRequest对象与服务器通信。我们尝试通过下面显示的图像来了解ajax的流程或ajax的工作原理。
正如在上面的示例中所看到的，XMLHttpRequest对象起着重要作用。
- 用户从UI发送请求，javascript调用转到
XMLHttpRequest对象。 - HTTP请求由
XMLHttpRequest对象发送到服务器。 - 服务器使用JSP，PHP，Servlet，ASP.net等与数据库交互。
- 检索数据。
- 服务器将XML数据或JSON数据发送到
XMLHttpRequest回调函数。 - HTML和CSS数据显示在浏览器上。
Ajax Java示例
要创建ajax示例，需要使用服务器端语言，例如：Servlet，JSP，PHP，ASP.Net等。这里使用JSP来生成服务器端代码。
在这个例子中，只是打印给定数字的表。
使用jsp创建ajax示例的步骤
需要按照以下步骤操作：
- 加载
org.json.jar文件。 - 创建输入页面以接收文本或数字。
- 创建服务器端页面以处理请求。
- 在
web.xml文件中提供条目。
第1步：加载org.json.jar文件
下载此示例，在WEB-INF/lib目录中包含了org.json.jar文件。
第2步：创建输入页面以接收文本或数字
在此页面中，我们创建了一个从用户获取输入的表单。当用户单击showTable按钮时，将调用sendInfo()函数。在这个函数中编写了所有的ajax代码。
只要准备好状态更改，我们就调用了getInfo()函数。它通过innerHTML属性动态地将返回的数据写入网页。
文件：table1.html
<html>
<head>
<script>
var request;
function sendInfo() {
var v = document.vinform.t1.value;
var url = "index.jsp?val=" + v;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
request.onreadystatechange = getInfo;
request.open("GET", url, true);
request.send();
}
catch (e) {
alert("Unable to connect to server");
}
}
function getInfo() {
if (request.readyState == 4) {
var val = request.responseText;
document.getElementById('amit').innerHTML = val;
}
}
</script>
</head>
<body>
<marquee>
<h1>This is an example of ajax</h1>
</marquee>
<form name="vinform">
<input type="text" name="t1">
<input type="button" value="ShowTable" onClick="sendInfo()">
</form>
<span id="amit"> </span>
</body>
</html>第3步：创建服务器端页面以处理请求
在这个jsp页面中，我们打印给定数字的表格。
文件：index.jsp
<%
int n=Integer.parseInt(request.getParameter("val"));
for(int i=1;i<=10;i++)
out.print(i*n+"<br>");
%>文件：web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>table1.html</welcome-file>
</welcome-file-list>
</web-app>输出结果如下 -
Ajax Java数据库示例
在此示例中，我们使用Ajax与数据库进行交互。无需太多的代码。仅在服务器端页面中写入数据库逻辑。
在这个例子中，在index.jsp文件中编写了服务器端代码。
通过jsp使用数据库创建ajax示例的步骤
需要按照以下步骤操作：
- 加载
org.json.jar文件 - 创建输入页面以接收文本或数字
- 创建服务器端页面以处理请求
第1步：加载org.json.jar文件
下载此示例，在WEB-INF/lib目录中放入org.json.jar文件。
第2步：创建输入页面以接收文本或数字
在此页面中，我们创建了一个从用户获取输入的表单。当用户按任意键时，调用sendInfo()函数。在这个函数中编写了所有的ajax代码。
只要准备好状态更改，就调用了getInfo()函数。它通过innerHTML属性动态地将返回的数据写入网页。
文件：table1.html
<html>
<head>
<script>
var request;
function sendInfo() {
var v = document.vinform.t1.value;
var url = "index.jsp?val=" + v;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
request.onreadystatechange = getInfo;
request.open("GET", url, true);
request.send();
} catch (e) { alert("Unable to connect to server"); }
}
function getInfo() {
if (request.readyState == 4) {
var val = request.responseText;
document.getElementById('amit').innerHTML = val;
}
}
</script>
</head>
<body>
<marquee>
<h1>This is an example of ajax</h1>
</marquee>
<form name="vinform">
Enter id:<input type="text" name="t1" onkeyup="sendInfo()">
</form>
<span id="amit"> </span>
</body>
</html>第3步：创建服务器端页面以处理请求
在这个jsp页面中，我们打印给定id的员工的编号和姓名。
文件：index.jsp
<%@ page import="java.sql.*"%>
<%
String s=request.getParameter("val");
if(s==null || s.trim().equals("")){
out.print("Please enter id");
}else{
int id=Integer.parseInt(s);
out.print(id);
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/mdb","root","root");
PreparedStatement ps=con.prepareStatement("select * from emp where id=?");
ps.setInt(1,id);
ResultSet rs=ps.executeQuery();
while(rs.next()){
out.print(rs.getInt(1)+" "+rs.getString(2));
}
con.close();
}catch(Exception e){
e.printStackTrace();
}
}
%>执行上面项目示例代码，得到类似以下结果 -
Java AJAX电子邮件检验示例
我们可以在Java中创建一个AJAX示例，用于检查数据库中是否存在给定的电子邮件ID。
使用Java中的AJAX创建电子邮件查找器示例的步骤
需要按照以下步骤操作：
- 在数据库中创建表
- 加载org.json.jar文件
- 创建输入表单
- 创建服务器端页面以使用名称搜索员工
在此页面中，我们创建了一个表单，该表单用于获取输入以查找电子邮件。当单击检查可用性按钮时，它会告知电子邮件ID是否可用。
文件：index.html
<!DOCTYPE html>
<html>
<head>
<title>Email Finder Example</title>
<script>
var request;
function sendInfo() {
var email = document.vinform.email.value;
var url = "emailfinder.jsp?email=" + email;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
request.onreadystatechange = getInfo;
request.open("GET", url, true);
request.send();
} catch (e) { alert("Unable to connect to server"); }
}
function getInfo() {
if (request.readyState == 4) {
var val = request.responseText;
document.getElementById('mylocation').innerHTML = val;
}
}
</script>
</head>
<body>
<marquee>
<h1>AJAX Email Checker Example</h1>
</marquee>
<form name="vinform">
<input type="email" name="email" placeholder="enter email" />
<input type="button" onclick="sendInfo()" value="Check Availability" />
<span id="mylocation"></span>
</form>
</body>
</html>创建服务器端页面以处理请求
在这个jsp页面中，编写数据库代码来搜索电子邮件。
<%@ page import="java.sql.*" %>
<%
String email=request.getParameter("email");
if(email.contains("@")&&email.contains(".")){
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","system","oracle");
PreparedStatement ps=con.prepareStatement("select * from user100 where email=?");
ps.setString(1,email);
ResultSet rs=ps.executeQuery();
if(rs.next()){
out.print("Unavailable! <img src='unchecked.gif'/>");
}else{
out.print("Available! <img src='checked.gif'/>");
}
}catch(Exception e){
out.print(e);
}
}else{
out.print("Invalid email!");
}
%>AJAX+Java评论表单示例
在这个例子中，我们创建一个发表评论的表单。表单数据保存在数据库中，所有发布的注释列表显示在注释表单下方。
使用Java中的AJAX创建注释表单示例的步骤
需要按照以下步骤操作：
- 在数据库中创建表
- 加载org.json.jar文件
- 创建评论表单
- 创建服务器端页面以保存表单数据并列出所有发布的评论
创建评论表单
在此页面中，我们创建了一个从用户获取输入的表单。当用户单击“发表评论”按钮时，将调用postComment()函数。在这个函数中编写了所有的ajax代码。
文件：index.html
<!DOCTYPE html>
<html>
<head>
<script>
var request;
function postComment() {
var comment = document.commentform.comment.value;
var email = document.commentform.email.value;
var url = "index.jsp?comment=" + comment + "&email=" + email;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
try {
request.onreadystatechange = function () {
if (request.readyState == 4) {
var val = request.responseText;
document.getElementById('mylocation').innerHTML = val;
}
}//end of function
request.open("GET", url, true);
request.send();
} catch (e) { alert("Unable to connect to server"); }
}
</script>
</head>
<body>
<h1>Comment Form</h1>
<form name="commentform">
Enter Comment:<br />
<textarea name="comment" style="width:300px;height:100px" required>
</textarea><br />
Enter Email:<br />
<input type="text" name="email" required /><br /><br />
<input type="button" value="Post Comment" onclick="postComment()">
</form>
<span id="mylocation"></span>
</body>
</html>创建服务器端页面以处理请求
在这个jsp页面中，编写数据库代码以保存注释并打印所有注释。
<!DOCTYPE html>
<html>
<head>
<style>
div.box {
margin: 2px;
border: 1px solid pink;
padding: 10px;
background-color: #e3e3e3
}
</style>
</head>
<body>
<%@ page import="java.sql.*" %>
<%
String comment=request.getParameter("comment");
String email=request.getParameter("email");
if(comment==null||email==null||comment.trim().equals("")||email.trim().equals("")){
out.print("<p>Please write comment</p>");
}else{
try{
Class.forName("oracle.jdbc.driver.OracleDriver");
Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","system","oracle");
PreparedStatement ps=con.prepareStatement("insert into usercomment(comment1,email) values(?,?)");
ps.setString(1,comment);
ps.setString(2,email);
int i=ps.executeUpdate();
PreparedStatement ps2=con.prepareStatement("select * from usercomment order by id desc");
ResultSet rs=ps2.executeQuery();
out.print("<hr/><h2>Comments:</h2>");
while(rs.next()){
out.print("<div class='box'>");
out.print("<p>"+rs.getString(2)+"</p>");
out.print("<p><strong>By: "+rs.getString(3)+"</strong></p>");
out.print("</div>");
}
con.close();
}catch(Exception e){out.print(e);}
}//end of else
%>
</body>
</html>我们可以通过JAX代码获取JSON数据。AJAX提供了异步获取响应的。它不会重新加载页面并生成一个工具。
AJAX JSON 示例
下面看一个使用 AJAX 代码，我们获取 JSON 数据的简单示例。
<html>
<head>
<meta content="text/html; charset=utf-8">
<title>AJAX JSON by Javatpoint</title>
<script type="application/javascript">
function load()
{
var url = "http://date.jsontest.com/";//use any url that have json data
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();//for Chrome, mozilla etc
}
else if(window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");//for IE only
}
request.onreadystatechange = function(){
if (request.readyState == 4 )
{
var jsonObj = JSON.parse(request.responseText);//JSON.parse() returns JSON object
document.getElementById("date").innerHTML = jsonObj.date;
document.getElementById("time").innerHTML = jsonObj.time;
}
}
request.open("GET", url, true);
request.send();
}
</script>
</head>
<body>
Date: <span id="date"></span><br/>
Time: <span id="time"></span><br/>
<button type="button" onclick="load()">Load Information</button>
</body>
</html>
AJAX浏览器支持
并不是所有的浏览器都支持AJAX，以下是支持AJAX的主要浏览器 -
- Mozilla Firefox 1.0及以上版本。
- Netscape 7.1及以上版本。
- Apple Safari 1.2及以上版本。
- Microsoft Internet Explorer 5及更高版本。
- Konqueror。
- Opera 7.6及以上版本。
- 国产主流的浏览器。
编写下一个应用程序时，最好要考虑不支持AJAX的浏览器时如何处理。
注 - 当浏览器不支持AJAX时，它只是意味着浏览器不支持创建Javascript
XMLHttpRequest对象。
编写浏览器特定代码
使源代码与浏览器兼容的最简单方法是在JavaScript中使用try ... catch块。
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}
//-->
</script>
<form name = 'myForm'>
Name: <input type = 'text' name = 'username' /> <br />
Time: <input type = 'text' name = 'time' />
</form>
</body>
</html>在上面的JavaScript代码中，我们尝试三次来创建XMLHttpRequest对象。第一次尝试:
ajaxRequest = new XMLHttpRequest();
它适用于Opera 8.0 +，Firefox和Safari浏览器。如果失败，再尝试两次为Internet Explorer浏览器创建正确的对象 -
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");如果它不起作用，那么这里一个非常过时的浏览器，它不支持XMLHttpRequest，这也意味着它不支持AJAX。
但最有可能的是，变量ajaxRequest现在将被设置为浏览器使用任何XMLHttpRequest标准，我们可以开始向服务器发送数据。
AJAX操作流程
AJAX操作的步骤
- 发生客户端事件。
- 创建XMLHttpRequest对象。
- XMLHttpRequest对象创建成功并配置。
- XMLHttpRequest对象向Web服务器发出异步请求。
- Web服务器返回包含XML文档的结果。
- XMLHttpRequest对象调用
callback()函数并处理结果。 - HTML DOM已更新。
下面我们进一步了解这些步骤。
发生客户端事件
- JavaScript函数作为事件的结果被调用。
- 示例 - JavaScript validateUserId()函数被映射为输入表单字段上的onkeyup事件的事件处理程序，其
id设置为“userid” <input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">.
XMLHttpRequest对象创建
var ajaxRequest; // The variable that makes Ajax possible!
function ajaxFunction() {
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}XMLHttpRequest对象配置
在这一步中，我们将编写一个将由客户端事件触发的函数，并将注册一个回调函数processRequest()。
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}向Web服务器进行异步请求
源代码可在下面的代码中找到。最后几行代码是负责向Web服务器发出请求。这都是使用XMLHttpRequest对象ajaxRequest完成的。
function validateUserId() {
ajaxFunction();
// Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}假设在用户ID框中输入Maxsu，然后在上述请求中，URL设置为“validate?id=Maxsu”。
Webserver返回包含XML文档的结果
可以使用任何语言实现服务器端脚本，但其逻辑应如下所示。
- 获取客户端请求。
- 解析客户端的输入。
- 需要处理获得输入值。
- 将输出发送到客户端。
我们假设要使用servlet编写上面的逻辑，那么代码过程如下 -
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>true</valid>");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}回调函数调用processRequest()
XMLHttpRequest对象配置为在XMLHttpRequest对象的readyState状态更改时调用processRequest()函数。现在，此函数将从服务器接收结果，并将执行所需的处理。如下例所示，它根据Webserver返回的值设置变量消息为true或false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}HTML DOM已更新
这是最后一步，在此步骤中，HTML页面将会更新。它以下列方式发生 -
- JavaScript使用DOM API获取对页面中任何元素的引用。
- 获取元素引用的推荐方法是调用。
document.getElementById("userIdMessage"),
// where "userIdMessage" is the ID attribute
// of an element appearing in the HTML document现在可以使用JavaScript来修改元素的属性; 修改元素的样式属性; 或添加，删除或修改子元素。下面是一个例子(index.html) -
<html>
<script type = "text/javascript">
<!--
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// if the messageBody element has been created simple
// replace it otherwise append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
-->
</script>
<body>
<div id = "userIdMessage"><div>
</body>
</html>如果已经理解了上面的几个步骤，那么你已经可以理解并可以使用AJAX了。
AJAX+PHP数据库操作
为了更清楚地说明如何使用AJAX从数据库访问信息，我们将动态构建MySQL查询并在“ajax.html”上显示结果。但在我们继续本教程之前，需要做好一些基础工作。使用以下命令创建表。
注 - 假设您有足够的权限执行以下MySQL操作。
CREATE TABLE 'ajax_users' (
'name' varchar(50) NOT NULL,
'age' int(11) NOT NULL,
'sex' varchar(1) NOT NULL,
'wpm' int(11) NOT NULL,
PRIMARY KEY ('name')
)现在使用以下SQL语句将以下数据转储(插入)表中 -
INSERT INTO 'ajax_users' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_users' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_users' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_users' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_users' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_users' VALUES ('Julie', 35, 'f', 90);客户端HTML文件
现在我们创建客户端HTML文件，即ajax.html，它的代码如下 -
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function() {
if(ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age = " + age ;
queryString += "&wpm = " + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name = 'myForm'>
Max Age: <input type = 'text' id = 'age' /> <br />
Max WPM: <input type = 'text' id = 'wpm' /> <br />
Sex:
<select id = 'sex'>
<option value = "m">m</option>
<option value = "f">f</option>
</select>
<input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
</form>
<div id = 'ajaxDiv'>Your result will display here</div>
</body>
</html>注 - 在查询中传递变量的方式是根据HTTP标准表单形式。
URL?variable1=value1;&variable2=value2;上面的代码将生成以下表单 -
在输入后，结果将显示在此部分中。
服务器端PHP文件
上面客户端脚本已准备就绪。现在需要编写服务器端脚本，它将从数据库中获取age，wpm和sex并将其发送回客户端。将以下代码放入文件“ajax-example.php”。
<?php
$dbhost = "localhost";
$dbuser = "dbusername";
$dbpass = "dbpassword";
$dbname = "dbname";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age))
$query .= " AND age <= $age";
if(is_numeric($wpm))
$query .= " AND wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)) {
$display_string .= "<tr>";
$display_string .= "<td>$row[name]</td>";
$display_string .= "<td>$row[age]</td>";
$display_string .= "<td>$row[sex]</td>";
$display_string .= "<td>$row[wpm]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>现在尝试在Max Age或任何其他框中输入有效值(例如120)，然后单击Query MySQL按钮。
如果您已成功完成本课程，那么应该撑握了如何使用MySQL，PHP，HTML和Javascript来编写AJAX应用程序。
AJAX安全性
AJAX安全性：服务器端
- 基于AJAX的Web应用程序使用与常规Web应用程序的服务器端具有相同安全问题。
- 可以在
web.xml文件(声明性)或程序(程序)中指定身份验证，授权和数据保护要求。 - 基于AJAX的Web应用程序受到与常规Web应用程序相同的安全威胁。
AJAX安全：客户端
- JavaScript代码对用户/黑客可见。黑客可以使用JavaScript代码来推断服务器端的弱点。
- JavaScript代码从服务器下载并在客户端执行(“eval”)，并可能通过恶意代码破坏客户端。
- 下载的JavaScript代码受到沙盒安全模型的约束，可以放宽签名的JavaScript。
AJAX当前问题
AJAX正在快速增长，它包含许多问题的原因。我们希望随着时间的推移，它们将得到解决，AJAX将成为Web应用程序的理想选择。我们列出了AJAX目前遇到的一些问题。
增加了复杂性
- 服务器端开发人员需要了解HTML客户端页面以及服务器端逻辑中将需要表示逻辑。
- 页面开发人员必须具备JavaScript技术技能。
基于AJAX的应用程序可能难以调试，测试和维护
- JavaScript很难测试 - 自动测试很难。
- JavaScript中的模块化程度较弱。
- 尚缺乏设计模式或最佳实践指南。
工具包/框架尚未成熟
- 的大多数工具包/框架都处于测试阶段。
尚未标准化XMLHttpRequest
- IE的未来版本将解决这个问题。
旧浏览器中不支持XMLHttpRequest
- iframe可以解决。
JavaScript技术依赖性和不兼容性
- 必须启用应用程序才能运行。
- 仍然存在一些浏览器不兼容性。
JavaScript代码对黑客可见
- 设计糟糕的JavaScript代码可能会引发安全问题。
浙公网安备 33010602011771号