1. Ajax概述

异步的(Asynchronous)，使用Ajax代表不使用之前的转发重定向操作 异步访问，局部刷新
使用XMLHttpRequest技术整合

2. 原生Ajax实例 – 使用jsp

【【在<input>标签内，加入 onblur 事件】】【获取输入】并判断，在页面内进行前端验证======================================================================================
JS访问服务器// 1.创建XMLHttpRequest对象var xhr;function createXHR(){if(window.ActiveObject){  // IExhr = new ActiveObject('Microsoft.XMLHTTP');} else {xhr = new XMLHttpRequest();}}// 2.和服务器建立连接 -- get请求xhr.open("get", "/example/index.jsp?name=" + name);// post请求xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.open("post", "/example/index.jsp");// 3.指定回调函数xhr.onreadystatechange = function() {if (xhr.readyState == 4) {if (xhr.status == 200) {// 1.获取返回值var text = xhr.responseText();// 2.处理返回值.....} else {alert(xhr.status + "  " + xhr.statusText);}}};// 4.发送请求给服务器 -- get请求的发送方式xhr.send();// post请求xhr.send("name=" + name);

3. 原生Ajax实例 – 使用servlet

【【在<input>标签内，加入 onblur 事件】】【获取输入】并判断，在页面内进行前端验证=====================================================================================
JS访问后端 servlet// 1.创建XMLHttpRequest对象 ：与上面类似createXHR();// 2.和服务器建立连接xhr.open("post", "/example/servlet/CodeServlet");xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");// 3.指定回调函数xhr.onreadystatechange = function(){if(xhr.readyState == 4){if(xhr.status == 200){// 1.获取返回值var text = xhr.responseText();// 2.处理返回值.....var arr = text.split(",");arr[0]   arr[1]} else {alert(xhr.status + "  " + xhr.statusText);}}};// 4.发送请求给服务器xhr.send("code="+code);
======================================================================================
服务端（CodeServlet）【需要配置web.xml】public class CodeServlet extends HttpServlet {protected void service(HttpServletRequest req, HttpServletResponse resp)               throws Exception {// 获取数据String code = req.getParameter("code");// 调用业务层，访问数据库Map<String, String> map = new HashMap<>();map.put("010", "北京，北京");map.put("", "");String content = map.get(code);if(content == null){content = "未知，未知";}// 返回结果resp.setContentType("text/html;charset=utf-8");resp.getWriter().println(content);}}

4. jQuery封装

引入jQuery

   <script type="text/javascript" src="js/jquery.jqprint-0.3.js"></script>

通过jQuery使用ajax

$(function(){// get请求，无法处理错误$.get("/example/index.jsp", "name="+name, function(result){// result就是结果}); // post请求$.post("/example/index.jsp", {"name":name}, function(result){// result就是结果});
--------------------------------------------------------------------------------
示例：$.ajax(function(){url: "/example/index.jsp",type: "get",data: "name="+name,dataType: "text",success: function(msg){// 成功处理},error: function(msg){// 错误处理}});
});

5. JSON

Ajax返回复杂数据，比如集合、对象等，使用JSON

JSON对象

var person = {"name": "你好", "age": 25, "wife": null};person.name  ==>  你好

JSON数组

var arr = ["HTML", "CSS", "JS"];arr[0]  ==>  HTML

对象数组（相当于集合）

var users = [{"id": 1, "username": "root", passwd: "admin"},{"id": 2, "username": "user", passwd: "123"}
];users[0].id  ==>  1

不规则数据

var china = {name: "中国",provinces:[{name:"山东省", cities:{city:["临沂", "蒙阴"]}}，{name:"河北省", cities:{city:["石家庄", "张家口", "承德"]}}]
};china.provinces[1].cities.city[1]  ==>  张家口

JSON对象和JSON字符串之间的转换

var person = {"name": "你好", "age": 25, "wife": null};   // JSON对象
var person1 = '{"name": "你好", "age": 25, "wife": null}';   // JSON字符串JSON字符串  ==>  JSON对象
1. JSON.parse(person1);
2. eval("(" + person1 + ")");JSON对象  ==>  JSON字符串
JSON.stringify(person);                   treeify【树化】

6. 简单示例：三级联动菜单

自关联(适合于树状结构的)

provinces：idptitlecitys:idctitleproid合并为一张表
areas:idatitlepid

自关联，表中的某一列，关联了这个表中的另外一列，但是它们的业务逻辑含义是不一样的

因为省没有所属的省份，所以pid可以填写为null
城市所属的省份pid，填写省所对应的编号id
在这个表中，结构不变，可以添加区县、乡镇街道、村社区等信息

自连接查询其实等同于连接查询，需要两张表，只不过它的左表（父表）和右表（子表）都是自己。做自连接查询的时候，是自己和自己连接，分别给父表和子表取两个不同的别名，然后附上连接条件。

查询省的名称为“山东省”的所有城市

select city.*
from areas as city
inner join areas as province
on city.pid = province.aid
where province.atitle='山东省';

三级联动

省市县三级区域一张表即可
通过外键建立上下级关系自关联

页面：

<style type="text/css">select{width:300px;height:30px;}#showdiv{width:920px;margin:auto;margin-top:200px;}
</style><div id="showdiv"><select name="province" id="province" onchange="getCity()"></select><select name="city" id="city" onchange="getCounty()"></select><select name="county" id="county"></select>
</div><script>// 页面加载完成后，立即加载所有的省级行政区别写入指定的下拉列表中$(function(){$.ajax({url:"servlet地址",type:"get",data:{parentId:0},dataType:"text",success:function(res){// 返回的是JSON字符串，将它转换为JSON对象var arr = eval("(" + res + ")");// 生成option字符串var str = "";for(var i = 0; i < arr.length; i++){str += '<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>'}// 写到下拉列表中$("#province").html(str);// 调用getCity()getCity();},error:function(){}});});// 改变了省级行政区后，加载该省的市级行政区，并写入对应的下拉列表中function getCity(){var parentId = $("#province").val();$.ajax({url:"servlet地址",type:"get",data:{parentId:parentId},dataType:"text",success:function(res){// 返回的是JSON字符串，将它转换为JSON对象eval("var arr=" + res);// 生成option字符串var str = "";for(var i = 0; i < 【arr.length】; i++){str += '<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>'}// 写到下拉列表中$("#city").html(str);getCounty();},error:function(){}});}//改变了市级行政区后，加载该市的行政区，并写入对应的下拉列表中function getCounty(){var parentId = $("#city").val();$.ajax({url:"servlet地址",type:"get",data:{parentId:parentId},dataType:"json",success:function(arr){// 生成option字符串var str = "";for(var i = 0; i < arr.length; i++){str += '<option value="'+arr[i].areaId+'">'+arr[i].areaName+'</option>'}// 写到下拉列表中$("#county").html(str);},error:function(){}});}
</script>

后端servlet中：

获取传入的parentid
调用持久层方法，获取指定parentid下的下级区域列表
将List转换为字符串（使用Gson工具类）
- Gson gson = new Gson();
- gson.toJson(list);
返回结果

【Ajax】 # ajax简单概述相关推荐

Ajax实现简单用户名重名查询
很早就想发布这篇POST了,Ajax实现简单用户名重名查询,引用了xmlhttprequest object pool,如下: XMLHttpRequest Object Pool /** * XM ...
ajax 示例代码,Ajax的简单实用实例代码
我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在UsersAction类中的checkUser方法中接收并验证前台的表单数据,针对不同情况,返回一个状态码cod ...
html option ajax,Ajax实现简单下拉选项效果【推荐】
基本都是固定步骤!主要在JAVASCRIPT和PHP中的操作 1.HTML代码里就只有两个SELECT标签如下: 请选择请选择 2.Javascript中进行创建选项和执行AJAX异步请求步骤如下 ...
php ajax简单实例代码,Ajax的简单实用实例代码
这篇文章主要介绍了Ajax的简单实用实例代码,对ajax感兴趣的朋友可以参考下Ajax的简单实用的方法我将实现一个简单的Ajax页面无刷新进行用户验证案例: 效果如下图: 实现主要过程: 在User ...
新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy
[索引页] [×××] 新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件(ScriptManager.ScriptManagerProxy.UpdatePanel. UpdatePro ...
用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
ajax简单实例代码,分享Ajax创建简单实例代码
XmlHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分内容而 ...
创建ajax及用法,Ajax的简单使用
对于常见的Ajax使用,大概过程如下 1.创建xmlhttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ ...
JS与JQ的Ajax异步简单解释
JS Ajax步骤 1. 第一步:得到异步对象(XMLHttpRequest) >大多数浏览器:var xmlHttp=new XMLHttpRequest(); >IE6.0: ...
jQuery ajax - ajax()
jQuery ajax - ajax() 方法 jQuery Ajax 参考手册实例通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ ...

【Ajax】 # ajax简单概述