什么是Ajax？
- AJAX 全称为 “Asysnchronous JavaScript and XML” (异步JavaScript 和 XML ) ,是一种创建交互式网页应用的网页开发技术。
- 不是一种新技术，是如下几种技术的组合应用
–基于 web标准( standards-based presentation ) XHTML + CSS 的表示；
–使用 DOM (Document Object Model) 进行动态显示及交互；
–使用 XML 和 JSLT 进行异步数据查询，检索；
–使用 XMLHttpRequest 进行异步数据查询，检索；
–使用 JavaScript 将所有的东西绑定在一起 - Ajax 本质上是一个浏览器端的技术
为什么需要Ajax？
- 需求：有些时候我们需要将本次的响应结果和前面的响应结果内容在同一个页面中展现给用户
- 解决：
1.在后台服务器将多次响应内容重新拼接成一个 jsp页面，响应
但是这样会造成很多响应内容被重复的响应，资源浪费
2.使用 Ajax技术
Ajax学习
-
概念：局部刷新技术，不是一门新技术，是多种技术的组合，是浏览器端的技术
-
作用：实现在当前结果页中显示其他请求的响应内容
-
使用：ajax 的基本流程：
// 创建 ajax引擎对象
// 覆写 onreadystatement函数
// 判断 ajax状态码
// 判断响应状态码
//获取响应内容（响应内容的格式）
// 普通字符串
// json（重点）
其实就是讲述数据按照 Json的格式拼接好的字符串，方便使用eval方法
将接受的字符串数据直接转换为 Js的对象
json 格式：
var 对象名={
属性名：属性值,
属性名：属性值，
}
//XML 数据
//处理响应内容（js操作文档结构）
//发送请求
// get请求
get 请求实体拼接在 URL后面，？隔开，键值对
ajax.open(“get”,“url”);
ajax.send(null);
// post请求
有单独的请求实体
ajax.open(“post”,“ajax”)
ajax.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
ajax.send(“name=333&pwd=222”); -
ajax的状态码
ajax状态码 ： readyState : 0,1,2,3,4
4 : 表示响应内容被成功接收响应状态码： status
200：表示一切OK
404：资源未找到
500：内部服务器错误 -
ajax的异步和同步
ajax.open( method,url,async) — async : 表示同步代码执行还是异步代码执行（默认是true，表示异步）
以下是自己在慕课网上看到的视频然后自己敲的源码，但是从servlet通过ajax传回数据到JSP页面的时候有问题，有大佬帮我解决一下这个问题的话简直感激不尽。
- 这是JSP的代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<style type="text/css">
#mydiv{
position:absolute;
left: 50%;
top: 40%;
margin-left: -200px;
margin-top: -50px;
}
.mouseOver{
background:#708090 ;
color:#FFFAFA;
}
.mouseOut{
background:#FFFAFA ;
color:#000000;
}
</style>
<script type="text/javascript">
var xmlHttp;
//获得用户输入内容的关联信息的函数
function getMoreContents() {
//首先获得用户的输入
var content = document.getElementById("keyword");
if(content.value == ""){
clearContent();
return;
}
//然后给服务器发送用户输入的内容,因为我们采用的是ajax异步发送数据
//所以我们要使用一个对象，叫做XmlHttp对象
xmlHttp = createXMLHttp();
//alert(xmlHttp);
//要给服务器发送数据
var url = "search?keyword=" + escape(content.value);
//true表示Javascript脚本会在send()方法之后继续执行，而不会等待来自服务器的响应
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候被调用
//xmlHttp的状态为0 - 4,我们只关心4（complete）这个状态，所以说当完成后再调用回调方法才有意义
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
//获取XmlHttp对象
function createXMLHttp() {
//对于大多数浏览器都适用
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
//要考虑浏览器的兼容性
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
function callback() {
if(xmlHttp.readyState == 4){
//200 : 服务器响应成功，404：资源未找到，500代表服务器内部错误
if(xmlHttp.status == 200){
//交互成功：
var result = xmlHttp.responseText;
//解析获得数据
var json = eval("(" + result + ")");
setContent(json);
//获取数据之后，就可以动态显示这些数据在输入框下面
//alert(json);
}
}
}
//设置关联数据的显示
function setContent(contents) {
clearContent();
//首先获得关联数据的长度，以此来确定生成多少<tr></tr>
setLocation();
var size = contents.length;
//设置内容
for(var i = 0;i < size ; i++){
var nextNode = contents[i]; //代表的是json格式数据的第i个元素
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("border","0");
td.setAttribute("bgcolor","#FFFAFA");
td.onmouseover=function () {
this.className="mouseOver";
};
td.onmouseout = function () {
this.className = "mouseOut";
};
td.onclick = function () {
//这个方法实现的是，当用鼠标点击选择一个关联的数据时，关联数据自动设置为输入框的数据
}
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
//清空之前的数据
function clearContent() {
var contentTableBody = document.getElementById("content_table_body");
var size = contentTableBody.childNodes.length;
for (var i = size - 1 ;i >= 0 ;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
document.getElementById("popDiv").style.width = null;
}
//当输入框失去焦点的时候，关联信息清空
function keywordBlur() {
clearContent();
}
//用来设置关联信息的位置
function setLocation() {
//关联信息的显示位置要和输入框一致
var content = document.getElementById("keyword");
var width = content.offsetWidth; //输入框的宽度
var left = content["offsetLeft"]; //距离左边框的距离
var top = content["offsetTop"] + content.offsetHeight //到顶部的距离
//获得显示数据的div
var popDiv = document.getElementById("popDiv");
popDiv.style.border="black 1px solid";
popDiv.style.left = left + "px";
popDiv.style.top = top + "px";
popDiv.style.width = width +"px";
document.getElementById("content_table").style.width = width + "px";
}
</script>
<title>登录页面</title>
</head>
<body>
<div id="mydiv">
<!-- 输入框 -->
<input type="text" size="50" id="keyword" onkeyup="getMoreContents()"
onblur="keywordBlur()" onfocus="getMoreContents()"/>
<input type="button" value="百度一下" width="50px">
<%-- 下面是内容展示区域 --%>
<div id="popDiv">
<table id="content_table" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="0">
<tbody id="content_table_body">
<%--动态显示数据显示在这儿--%>
</tbody>
</table>
</div>
</div>
</body>
</html>
- 这是Servlet代码：
package oym.servlet;
import net.sf.json.JSONArray;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
public class SearchServlet extends HttpServlet {
static List<String> datas = new ArrayList<String>();
static {
datas.add("ajax");
datas.add("ajax post");
datas.add("becky");
datas.add("bill");
datas.add("james");
datas.add("jerry");
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
System.out.println("Servlet：");
//首先获得客户端发送来的数据keyword
String keyword = req.getParameter("keyword");
if(keyword == null){
keyword = "";
}
System.out.println("keyword:" + keyword);
//获取关键字以后进行处理，得到关联数据
List<String> listData = getData(keyword);
//返回Json格式
System.out.println(JSONArray.fromObject(listData));
resp.getWriter().write((JSONArray.fromObject(listData)).toString());
}
//获得关联数据的方法
public List<String> getData(String keyword){
List<String> list = new ArrayList<String>();
for (String data:datas) {
if(data.contains((keyword))){
list.add(data);
}
}
return list;
}
}
扫一扫
1328
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
