针对ajax学习和ajax自学这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展16-Ajax学习之什么是Ajax,Ajax原理、AJAX学习-----基础、Ajax学习之------>Aja
针对ajax学习和ajax自学这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展16-Ajax学习之什么是Ajax,Ajax原理、AJAX学习-----基础、Ajax学习之------>Ajax和Json实现无限下拉框联动(上)、AJAX学习心得分享----（一）AJAX初识+原生态AJAX等相关知识，希望可以帮助到你。
本文目录一览：
ajax学习（ajax自学）
1.ajaxIndex.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<span><script src="../js/jquery.min.js"></script>
<script src="./ajaxDeal.js"></script></span>
</head>
<body>
<span><span id="pos_placeholder"></span><input type="text" id="namevalue">
<br />
<button id="btn">Send</button>
结果：<span id="result"></span></span>
</body>
</html>ajaxDeal.js
$(document).ready(function(){
$("#btn").on("click",function(){
$.post("ajaxServer.jsp",{name:$("#namevalue").val()},function(data){
$("#result").text(data);
});
});
});
也可以这样写：
var name="name="+$("#namevalue").val();
$.post("ajaxServer.jsp",name,function(data){
$("#result").text(data);
//$("#result").html(data);
});
ajaxServer.jsp
<%
String str=request.getParameter("name")+"";
if("null".equals(str)){
out.print("Args Error");
}else{
out.print("Hello "+str);
}
%>
result：ajax异步请求访问，页面不刷新
16-Ajax学习之什么是Ajax,Ajax原理
1.Ajax是什么？
Asynchronous Javascript And XML,
异步JavaScript和XML
包含7种技术：
xml,javascript,css,xmlhttprequest,xstl,dom,xhtml
2.传统的客户端和服务器响应方式缺点：
1.数据是整体提交
2.整个页面有刷新
3.用户体验不好
4.占带宽（使用流量大）
3.
ajax是一个与服务器语言无关的技术。
可以用到PHP,javaee,.net网站。
4.为什么ajax会如此流行？
1.页面无刷新的动态数据交换
2。局部刷新页面{验证用户名唯一}
3.界面的美观[增强用户体验]
4.对数据库的操作
5.可以返回简单的文本格式，也可以返回xml文件格式，json数据格式
无刷新数据交换技术有下：
flash,java applet,框架，iframe,ajax
ajax原理：
老师想买个东西，可是他正在上课，
如果去买东西了，同学们就得等，于是就找了小王帮他买。
就不用同学们等待了。
AJAX学习-----基础
介绍：
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
</pre><pre name="code"><html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>
<body>
<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
XMLHttpRequest 对象用于和服务器交换数据。
向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
| 方法 |
描述 |
| open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
|
| send(string) |
将请求发送到服务器。
|
GET 请求
一个简单的 GET 请求：
ottom:0px; padding:10px; border:1px dotted rgb(119,"demo_get.asp",true);
xmlhttp.send();
在上面的例子中，您可能得到的是缓存的结果。
为了避免这种情况，请向 URL 添加一个唯一的 ID：
ottom:0px; padding:10px; border:1px dotted rgb(119,"demo_get.asp?t=" +,true);
xmlhttp.send();Math.random()
如果您希望通过 GET 方法发送信息，请向 URL 添加信息：
POST 请求
一个简单 POST 请求：
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
ottom:0px; padding:10px; border:1px dotted rgb(119,"ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
| 方法 |
描述 |
| setRequestHeader(header,value) |
向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
|
url - 服务器上的文件
open() 方法的url参数是服务器上文件的地址：
ottom:0px; padding:10px; border:1px dotted rgb(119,true);
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .PHP （在传回响应之前，能够在服务器上执行任务）。
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：
ottom:0px; padding:10px; border:1px dotted rgb(119,);true
对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
Async = true
当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",true);
xmlhttp.send();
Async = false
如需使用 async=false，请将 open() 方法中的第三个参数改为 false：
ottom:0px; padding:10px; border:1px dotted rgb(119,false);
我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。
请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。
注释：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：
ottom:0px; padding:10px; border:1px dotted rgb(119,false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Ajax学习之------>Ajax和Json实现无限下拉框联动(上)
init.jsp页面，直接跳转到InitShengServlet2这个servlet初始化省份<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:forward page="/InitShengServlet2"></jsp:forward>
/**
该servlet初始化完后跳转到list4.jsp
*/
InitShengServletinitShengServlet
package com.servlet;
import java.io.IOException;
import javax.servlet.servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.dao.CityDao;
@SuppressWarnings("serial")
public class InitShengServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws servletexception,IOException {
CityDao cityDao=new CityDao();
request.setAttribute("shengList",cityDao.findByParentId(0));
request.getRequestdispatcher("list4.jsp").forward(request,response);
}
public void doPost(HttpServletRequest request,IOException {
doGet(request,response);
}
}
/**
数据库操作的工具类
*/
package com.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.sqlException;
public class DBManager {
public Connection getCon() {
try {
Class.forName("com.microsoft.sqlserver.jdbc.sqlServerDriver");
return DriverManager.getConnection(
"jdbc:sqlserver://127.0.0.1:1433;DatabaseName=cityManager","sa","sasa");
} catch (ClassNotFoundException e) {
e.printstacktrace();
} catch (sqlException e) {
e.printstacktrace();
}
return null;
}
// 查询结果
public ResultSet query(String sql,Object... p) {
Connection con = getCon();
PreparedStatement ps = null;
try {
ps= con.prepareStatement(sql);
if (p != null)
for (int i = 0; i < p.length; i++) {
ps.setobject(i + 1,p[i]);
}
return ps.executeQuery();
} catch (sqlException e) {
e.printstacktrace();
}
return null;
}
// 增删改
public int update(String sql,Object... p) {
Connection con = getCon();
PreparedStatement ps=null;
try {
ps= con.prepareStatement(sql);
if (p != null)
for (int i = 0; i < p.length; i++) {
ps.setobject(i + 1,p[i]);
}
return ps.executeUpdate();
} catch (sqlException e) {
e.printstacktrace();
throw new RuntimeException("增删改失败");
}finally{
this.closePrepStmt(ps);
this.closeConnection(con);
}
}
//关闭Connection
public void closeConnection(Connection con) {
try {
if (con != null)
con.close();
} catch (Exception e) {
e.printstacktrace();
}
}
//关闭PreparedStatement
public void closePrepStmt(PreparedStatement ps) {
try {
if (ps != null)
ps.close();
} catch (Exception e) {
e.printstacktrace();
}
}
//关闭ResultSet
public void closeResultSet(ResultSet rs) {
try {
if (rs != null)
rs.close();
} catch (Exception e) {
e.printstacktrace();
}
}
}
/** 处理根据ID找城市*/
package com.dao;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;
import com.db.DBManager;
import com.vo.City;
public class CityDao {
public List<City> findByParentId(int parentId){
String sqlString="select cityId,cityName,parentId,context from city where parentId="+parentId;
DBManager dbManager=new DBManager();
ResultSet rs=dbManager.query(sqlString);
List<City> cities=new ArrayList<City>();
try {
while(rs.next()){
cities.add(new City(rs.getInt("cityId"),rs.getString("cityName"),rs.getString("context")));
}
} catch (Exception e) {
e.printstacktrace();
}
return cities;
}
}
list4.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>无限下拉框联动</title>
<Meta http-equiv="pragma" content="no-cache">
<Meta http-equiv="cache-control" content="no-cache">
<Meta http-equiv="expires" content="0">
<Meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<Meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript"
src="${pageContext.request.contextpath}/js/console.js"></script>
<script type="text/javascript"
src="${pageContext.request.contextpath}/js/loading.js"></script>
<script type="text/javascript">
var xmlHttpRequest = createXmlHttpRequest();
var tagId2;
//发送请求查找指定省份ID的市区
function findShi(shengId,tagId) {
tagId2=tagId;
var isDelete=false;
var sons=document.getElementById(tagId).childNodes;
for ( var i = (sons.length-1); i >=0; i--) {
if(sons[i].nodeName.toupperCase()=="UL"){
sons[i].parentNode.removeChild(sons[i]);
isDelete=true;
}
}
if(isDelete) return;
var url = "${pageContext.request.contextpath}/getShiServlet2?shengId="
+ shengId;
xmlHttpRequest.open("GET",url,true);
//关联好回调函数
xmlHttpRequest.onreadystatechange = shiCallback;
//清除缓存方法 加入请求头
xmlHttpRequest.setRequestHeader("If-Modified-Since","0");
//真正向服务器端发送数据
xmlHttpRequest.send(null);
return false;
}
//找到指定省份ID的市区后给市区的节点增加值
function shiCallback() {
if (xmlHttpRequest.readyState == 4) {
debug("xmlHttpRequest.readyState==" + xmlHttpRequest.readyState);
debug("xmlHttpRequest.status ==" + xmlHttpRequest.status);
if (xmlHttpRequest.status == 200) {
var s = xmlHttpRequest.responseText;
debug("收到服务器回应==" + s);
var shis = eval(s);
if(shis.length==0){
debug("--->shis.length==0");
return;
}
var pli=document.getElementById(tagId2);
var nul=document.createElement("ul");
for ( var i = 0; i <shis.length; i++) {
var nli=document.createElement("li");
nli.id="tag"+shis[i].cityId;
//注意转移双引号
nli.innerHTML="<a href='#' onclick='return findShi("+shis[i].cityId+",\"tag"+shis[i].cityId+"\");'>"+shis[i].cityName+"</a>";
nul.appendChild(nli);
}
pli.appendChild(nul);
}
}
}
</script>
</head>
<body>
<h1>
无限下拉框联动
</h1>
<h3>
您来自哪里?
</h3>
<hr>
<ul>
<c:forEach items="${requestScope.shengList}" var="sheng">
<li id="tag${sheng.cityId}">
<a href="#"
onclick="return findShi(${sheng.cityId},'tag${sheng.cityId}');">
${sheng.cityName}</a>
</li>
</c:forEach>
</ul>
<hr>
</body>
</html>
package com.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.servletexception;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import com.dao.CityDao;
import com.vo.City;
public class getShiServlet2 extends HttpServlet {
public void doGet(HttpServletRequest request,IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
int shengId=Integer.parseInt(request.getParameter("shengId"));
CityDao cityDao=new CityDao();
List<City> cities=cityDao.findByParentId(shengId);
if(cities!=null){
//声明 JSONArray
JSONArray jsonArray=new JSONArray(cities);
//生产字符串
out.print(jsonArray.toString());
System.out.print(jsonArray.toString());
}
}
public void doPost(HttpServletRequest request,response);
}
}
AJAX学习心得分享----（一）AJAX初识+原生态AJAX
@H_301_1@
总结
以上是小编为你收集整理的AJAX学习心得分享----（一）AJAX初识+原生态AJAX全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
关于ajax学习和ajax自学的问题我们已经讲解完毕，感谢您的阅读，如果还想了解更多关于16-Ajax学习之什么是Ajax,Ajax原理、AJAX学习-----基础、Ajax学习之------>Ajax和Json实现无限下拉框联动(上)、AJAX学习心得分享----（一）AJAX初识+原生态AJAX等相关内容，可以在本站寻找。
