第一章Ajax
1.1 Ajax 概念
"Asynchronous Javascript And XML"(异步 JavaScript 和 XML)，是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页(不使用 Ajax)如果需要更新内容，必须重载整个网页页面。
1.2 AJAX原理分析
AJAX引擎会在不刷新浏览器地址栏的情况下，发送异步请求
1.1 使用JavaScript获得浏览器内置的AJAX引擎(XMLHttpRequest对象)
1.2 使用js确定请求路径和请求参数
1.3 AJAX引擎对象根据请求路径和请求参数进行发送请求
服务器接收到ajax引擎的请求进行处理
2.1 服务器获得请求参数数据
2.2 服务器处理请求业务(调用业务层代码)
2.3 服务器响应数据给ajax引擎
AJAX引擎获得服务器响应的数据，通过执行JavaScript的回调函数将数据更新到浏览器页面具体位置。
3.1 通过设置给AJAX引擎的回调函数获得服务器响应的数据
3.2 使用JavaScript在指定的位置，显示响应数据，从而局部修改页面的数据，达到局部刷新目的。
1.3 js原生的ajax开发
1.3.1. js原生的ajax的开发步骤
1)创建Ajax引擎对象(浏览器创建)
2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3)绑定提交地址
4)发送请求
5)监听里面处理响应数据
开发参照w3cschool文档
XMLHttpRequest 是 AJAX 的基础
准备资源：编写外部js (在html中导入依赖！！)
1531470878996.png
内容：
// 获取ajax开发核心对象
function getXhr() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
// 通过id 获取dom对象 自定一个方法 这里以 $(id) 为例 ，也可以 _(id) 等
function $(id) {
return document.getElementById(id);
}
准备资源页面 ajax_get.html
get请求
// ajax开发 发送get请求 更新 div标签 内容来自服务器servlet响应数据
function sendGet() {
// 1. 创建XMLHttpRequest
var xhr = getXhr();
// 2. 点击按钮 发送异步请求 后台servlet发送请求 获取response数据更新 div
// 建立请求参数 参数1 请求方式 get/post 参数2 请求服务器地址 参数3 true 异步 默认 true
xhr.open("get", "ajaxGetServlet?id=10101&name=lisi", true);
// 4 服务器响应 接受服务器response回送数据 函数 一开始不执行的！ 回调函数注册
xhr.onreadystatechange = function ()
// 事件 绑定函数 当服务器响应时，该事件触发了函数执行 dom更新
{
//当服务器相应码为200且xhr的readyState参数为4的时候，执行dom更新
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;// 服务器回送数据字符
$("mydiv").innerHTML = data;//调用自定义函数
}
}
//3 发送请求
xhr.send(null);// get 请求 send null
}
post请求
// ajax开发 发送get请求 更新 div标签 内容来自服务器servlet响应数据
function sendPost() {
// 1. 创建XMLHttpRequest
var xhr = getXhr();
// 2. 点击按钮 发送异步请求 后台servlet发送请求 获取response数据更新 div
// 建立请求参数 参数1 请求方式 get/post 参数2 请求服务器地址 参数3 true 异步 默认 true
xhr.open("post", "ajaxGetServlet", true);
// 4 服务器响应 接受服务器response回送数据 函数 一开始不执行的！ 回调函数注册
xhr.onreadystatechange = function ()
// 事件 绑定函数 当服务器响应时，该事件触发了函数执行 dom更新
{
// alert("1");
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;// 服务器回送数据字符
$("mydiv").innerHTML = data;
}
}
//3 post发送请求
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("id=9999");// post 请求
}
编写服务器servlet接受ajax请求
package cn.itheima.ajax.get;
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;
@WebServlet("/ajaxGetServlet")
public class AjaxGetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
System.out.println("客户端提交id = "+id);
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("你好A贾克斯");
}
}
1.4 get/post小结：
相同点：
1. 开发的四步骤结构代码是一样：
2. 获取XMLHttpRequest代码相同的
3. open("get/post","url",true);
4. xhr.onreadystatechange=function(){ // dom更新。。。}
5. 都是通过xhr.send()方法发送请求！
不同点:
1.xhr.open("get/post");
2.get请求 xhr.send(null)
post请求需要添加固定头信息和send参数
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(key=value)
第5节 jQuery框架的ajax(***)
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种：
请求方式
语法
GET请求
$.get(url, [data], [callback], [type])
POST请求
$.post(url, [data], [callback], [type])
AJAX请求
$.ajax([settings])
Load请求
$(element).load(url);
5.1 GET请求方式
语法：$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
示例1：
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
示例2：
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});
5.2 POST请求方式
示例1：使用 ajax 请求发送表单数据：
$.post("test.php", $("#testform").serialize());
示例2：获得 test.php 页面返回的 json 格式的内容：：
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
5.3 AJAX请求方式
$.ajax({key:value,key:value})
属性名称
解释
url
请求的服务器端url地址
async
(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
data
发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type
(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"
dataType
预期的返回数据的类型，取值可以是 xml, html, script, json, text, _defaul等
success
请求成功后的回调函数
error
请求失败时调用此函数
示例：
$.ajax({
//type默认为get
type:"post",
url:"searchServlet",
data:{name:word},
dataType:"json",
success:function (result) {
//判断数据是否为空,result返回的是一个列表数据，就是js数组
if(result.length>0){
//result为json数组例如 [{id:1,name:aa,password:123},...]
//每一个用户名就是一个div
var html="";//用于拼接结果
for(var i=0;i
var user = result[i];
html+="
}
//将html更新到show里面并显示出来
$(".show").html(html).show();
}
},
error:function () {
alert("没有成功获取数据");
}
});
第六章. json数据格式
简介：JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
json对象有三种数据格式，分别如下：
类型
语法
解释
对象类型
{name:value,name:value...}
其中name是字符串类型，而value是任意类型
数组/集合类型
[value,value,value...]或[{},{}... ...]
其中value是任何类型(比如js对象，或数组)
混合类型
{name:[]... ...}
合理包裹嵌套对象类型和数组类型
/**
* 案例一 -json对象的定义和调用说明
* var person={key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三丰";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
//json的定义
var person = {"firstname":"张","lastname":"三丰","age":100};
//json解析
alert(person.firstname);
alert(person.lastname);
alert(person.age);
/**
* 案例二 - json对象数组使用说明
* [{key:value,key:value},{key:value,key:value}]
*
*/
var json = [
{"firstname":"张","lastname":"三丰","age":100},
{"firstname":"张","lastname":"翠山","age":58},
{"firstname":"张","lastname":"无忌","age":23}
];
for(var i=0;i
alert(json[i].lastname);
}
/**
* 案例三 -json对象数组嵌套
* {
* "param1":[{key:value,key:value},{key:value,key:value}],
* "param2":[{key:value,key:value},{key:value,key:value}],
* "param3":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var json = {
"baobao":[
{"name":"小双","age":18,"addr":"扬州"},
{"name":"建宁","age":18,"addr":"北京海淀"},
{"name":"龙儿","age":38,"addr":"岛国"},
{"name":"阿珂","age":17,"addr":"台湾"}
],
"haohao":[
{"name":"楠楠","age":23,"addr":"北京昌平修正"},
{"name":"倩倩","age":18,"addr":"上海"}
]
}
//取倩倩
alert(json.haohao[1].name);
java对象需要转为json格式的字符串回调给浏览器。
常见的json转换工具
工具名称
介绍
Jsonlib
Java 类库，需要导入的jar包较多
Gson
google提供的一个简单的json转换工具
Fastjson
alibaba技术团队提供的一个高性能的json转换工具
Jackson
开源免费的json转换工具，springmvc转换默认使用jackson
fastjson依赖包：
fastjson依赖包
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//模拟数据库
ArrayList users = new ArrayList();
users.add(new User(1,"lanzhiyi",26));
users.add(new User(2,"Bill",56));
users.add(new User(3,"Tang",36));
users.add(new User(4,"周杰伦",36));
//集合转换json数组字符串 这里依赖fast
response.setContentType("text/json;charset=utf-8");
//fastjson依赖包的方法：java->json
String s = JSON.toJSONString(users);
System.out.println("s = " + s);
//s = [{"age":26,"id":1,"name":"lanzhiyi"},{"age":56,"id":2,"name":"Bill"},{"age":36,"id":3,"name":"Tang"},{"age":36,"id":4,"name":"周杰伦"}]
response.getWriter().print(s);
}
Titlefunction jsonDemo() {
$("#mytab").empty();
var str = "";
$.get("jsonServlet",function(data){
$(data).each(function () {
str+="
"+this.id+""+this.name+""+this.age+""})
$("#mytab").append("
\n" +"
编号\n" +"
姓名\n" +"
年龄\n" +"
").append(str)});
}
效果.PNG
扫一扫
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
