## 9.4、更新与验证
示例：
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
.red{
color:red;
}
</style>
</head>
<body>
<h2>DOM-用户管理</h2>
<table border="1" id="tabUsers" width="100%">
<tr>
<th>
<input type="checkbox" id="chbAll" />
</th>
<th>编号</th>
<th>姓名</th>
<th>城市</th>
<th>操作</th>
</tr>
</table>
<p>
<button type="button" id="btnDelSelected">删除选择项</button>
</p>
<fieldset>
<legend>用户信息</legend>
<p>
<label for="name">姓名：</label>
<input type="text" name="name" id="name" placeholder="请输入姓名" />
<span id="nameMsg" class="red"></span>
</p>
<p>
<label for="city">城市：</label>
<input type="text" name="city" id="city" placeholder="请输入城市" />
<span id="cityMsg" class="red"></span>
</p>
<p>
<button type="button" id="btnSave">保存</button>
<button type="button" id="btnUpdate">更新</button>
</p>
</fieldset>
<script src="../js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = {
data: [{
id: 1,
name: "张学友",
city: "中国香港"
},
{
id: 2,
name: "张国立",
city: "中国北京"
},
{
id: 5,
name: "张惠妹",
city: "中国上海"
}
],
index: -1,
bind: function() { //将数组中的数据渲染到页面中
//将表格中第一行以外的数组清空
$("#tabUsers tr:gt(0)").remove();
$.each(app.data, function(i, obj) {
var tr = $("<tr/>");
var chbItem = $("<input type='checkbox' name='chbItem'/>").data("index", i);
$("<td/>").append(chbItem).appendTo(tr);
$("<td/>").html(obj.id).appendTo(tr);
$("<td/>").html(obj.name).appendTo(tr);
$("<td/>").html(obj.city).appendTo(tr);
//创建一个删除元素，在元素中隐藏数据index，对应了数组中的索引
var aDel = $("<a href='#' class='del'>删除</a>").data("index", i);
var aEdit = $("<a href='#' class='edit'> | 编辑</a>").data("index", i).data("user", obj);
$("<td/>").append(aDel).append(aEdit).appendTo(tr);
//在#tabUsers元素中追加子元素tr
$("#tabUsers").append(tr);
});
},
save: function() { //新增
var user = {
id: 1,
name: $("#name").val(),
city: $("#city").val()
};
if(app.verify(user)) {
if(app.data.length > 0) { //如果数组中有数据
user.id = app.data[app.data.length - 1].id + 1;
};
app.data.push(user); //将user对象添加到数组的末尾
//重新渲染
app.bind();
}
},
deleteOne: function(obj) { //根据一个元素删除当前行
var index = $(obj).data("index");
//index表示删除的起始位置，1表示删除几个
app.data.splice(index, 1);
//更新页面
//app.bind();
$(obj).closest("tr").remove(); //移除最近的tr父节点
},
deleteSelected: function() { //多删除
var items = $("input[name=chbItem]:checked");
for(var i = items.size(); i >= 0; i--) {
app.deleteOne(items[i]);
}
},
verify: function(user) {
if(!(user.name && /^[\u4e00-\u9fa5]{2,4}$/.test(user.name))) {
$("#nameMsg").html("姓名格式错误");
return false;
} else {
$("#nameMsg").html("");
}
if(!(user.city && /^.{2,10}$/.test(user.city))){
$("#cityMsg").html("城市格式错误");
return false;
} else {
$("#cityMsg").html("");
}
return true;
},
start: function() {
//绑定事件
$("#btnSave").click(app.save);
$("#tabUsers").on("click", ".del", function() {
if(confirm('您确定要删除吗？')) {
app.deleteOne(this);
}
});
$("#chbAll").click(function() {
$("input[name=chbItem]").prop("checked", $(this).prop("checked"));
});
//多删除
$("#btnDelSelected").click(app.deleteSelected);
//编辑
$("#tabUsers").on("click", ".edit", function() {
//索引
var index = $(this).data("index");
//对象
var obj = $(this).data("user");
$("#name").val(obj.name);
$("#city").val(obj.city);
app.index = index;
});
//更新
$("#btnUpdate").click(function() {
//获得要更新的对象
var user = app.data[app.index];
user.name = $("#name").val();
user.city = $("#city").val();
app.bind();
app.index = -1;
});
app.bind();
}
};
app.start();
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
结果：
## 9.5、打字游戏
代码：
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var code = "";
var W, H, L, T;
var time = 10000;
var N = 10; //每次掉下几个
var CNT = 0; //共掉下几个
var DONE = 0; //打完几个
$(function () {
W = $("#div1").width();
H = $("#div1").height();
L = $("#div1").offset().left;
if (L == 0) {
document.location.reload();
}
T = $("#div1").offset().top;
//alert(W + "," + H + "," + L + "," + T);
});
function GetLetter() {
CNT++;
ShoMsg();
var chars = "A B C D E F G H I J K L M N O P Q R S T U V W X Y Z".split(" ");
var i = Random(0, 25);
$("<div/>")
.html(chars[i])
.css({ "font-size": 16 + i * 2, "left": L + Random(0, W - 60), "top": Random((T + 60) * -1, T + 60) * 3 })
.addClass("item")
.appendTo("#div1")
.animate({ top: (T + H) }, time, "linear", function () {
$(this).remove();
GetLetter();
});
code += chars[i];
return chars[i];
}
function Random(start, end) {
return parseInt(Math.random() * (end + 1)) + start;
}
function ShoMsg() {
$("#spanDONE").html(DONE);
$("#spanCNT").html(CNT);
$("#spanScore").html(parseInt(DONE*100/CNT*100)/100);
}
$(function () {
$("body").keydown(function (event) {
var code = String.fromCharCode(event.keyCode);
$("#div1 div").each(function () {
if ($(this).text() == code) {
DONE++;
$(this).stop().css({"color":"red","width":130,"height":130}).animate({ "font-size": "+=50" }, 100).hide(500, function () { $(this).remove(); GetLetter(); });
}
});
});
});
$(function () {
$("#btnStart").click(function () {
N = parseInt($("#txtSpeed").val());
time = parseInt($("#txtTime").val()) * 1000;
CNT = 0;
DONE = 0;
for (var i = 0; i < N; i++) {
GetLetter();
}
});
$("#btnStop").click(function () {
$("#div1 *").remove().stop();
});
});
</script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
#div1
{
width: 600px;
height: 300px;
background: #000;
overflow: hidden;
}
.item
{
color: #fff;
position: absolute;
width: 60px;
height: 60px;
}
#msg
{
line-height:30px;
font-size:20px;
color:#6f6;
font-family:黑体;
background:#000;
width:580px;
padding:0 10px;
}
#container
{
width:610px;
margin:0 auto;
}
h2
{
line-height:40px;
height:40px;
text-align:center;
}
p
{
margin:10px 0;
}
</style>
</head>
<body>
<div id="container">
<h2>打字小游戏</h2>
<p>
个数：<input id="txtSpeed" type="text" value="10" />个
速度：<input id="txtTime" type="text" value="10" />秒
<input id="btnStart" type="button" value="开始" />
<input id="btnStop" type="button" value="停止" />
</p>
<div id="div1">
</div>
<p id="msg">
产生：<span id="spanCNT">0</span>个
完成：<span id="spanDONE">0</span>个
得分：<span id="spanScore">0</span>分
</p>
</div>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
结果：
示例：
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery DOM</title>
<style>
#div1 {
position: relative;
width: 900px;
height: 500px;
border: 2px solid red;
margin: 0 auto;
}
.letter {
position: absolute;
font-size: 50px;
}
</style>
</head>
<body>
<h2>jQuery DOM</h2>
<div id="div1">
</div>
<script src="../js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function game() {
$("<div/>")
.html("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('')[R(0,25)])
.addClass("letter")
.css({
left: R(0, 900) + "px",
top: R(-50, 0) + "px"
})
.appendTo("#div1")
.animate({
top: '500px'
}, R(100, 8000), "linear", function() {
$(this).remove();
game();
});
}
function R(start, end) {
return parseInt(Math.random() * (end + 1)) + start;
}
game();
game();
game();
game();
game();
game();
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
结果：
## 9.6、AJAX基础
工程：
User
[](javascript:void(0); "复制代码")
~~~
package com.zhangguo.entity;
/***
* 用户实体 Bean
*
*/
public class User {
private int id;
private String name;
private String city;
public User() {
}
public User(int id, String name, String city) {
super();
this.id = id;
this.name = name;
this.city = city;
}
@Override
public String toString() {
return "User [id=" + id + ", name=" + name + ", city=" + city + "]";
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
}
~~~
[](javascript:void(0); "复制代码")
UserDao:
[](javascript:void(0); "复制代码")
~~~
package com.zhangguo.dao;
import java.util.ArrayList;
import java.util.List;
import com.zhangguo.entity.User;
/**
* 用户数据访问
* */
public class UserDao {
private static List<User> users=new ArrayList<>();
static{
users.add(new User(1,"张国立", "中国北京"));
users.add(new User(2,"张学友", "中国香港"));
users.add(new User(6,"张慧妹", "中国珠海"));
}
/**获得所有用户*/
public List<User> getAllUsers(){
return users;
}
/**添加用户*/
public void addUser(User user){
users.add(user);
}
}
~~~
[](javascript:void(0); "复制代码")
UserController:
[](javascript:void(0); "复制代码")
~~~
package com.zhangguo.action;
import java.io.IOException;
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 com.zhangguo.dao.UserDao;
import com.zhangguo.entity.User;
/**
* 用户控制器
*/
@WebServlet("/UserController")
public class UserController extends HttpServlet {
private static final long serialVersionUID = 1L;
private UserDao userDao=new UserDao();
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
request.setCharacterEncoding("utf-8");
String result="[";
for (User user : userDao.getAllUsers()) {
result+="{\"id\":"+user.getId()+",\"name\":\""+user.getName()+"\",\"city\":\""+user.getCity()+"\"},";
}
if(result.substring(result.length()-1,result.length()).equals(","))
{
result=result.substring(0,result.length()-1);
}
result+="]";
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
response.getWriter().print(result);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
~~~
[](javascript:void(0); "复制代码")
index.html
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
</head>
<body>
<h2>jQuery AJAX</h2>
<table border="1" id="tabUsers" width="100%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>城市</th>
</tr>
</table>
<h3 id="msg"></h3>
<script src="js/jquery-1.12.3.min.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript">
$.ajax({
type: "get", //请求类型
url: "UserController", //路径
beforeSend:function(){ //请求前的事件
$("#msg").html("努力加载中...");
},
success: function(data){ //请求成功后的事件
$.each(data, function(i, obj) {
var tr = $("<tr/>");
$("<td/>").html(obj.id).appendTo(tr);
$("<td/>").html(obj.name).appendTo(tr);
$("<td/>").html(obj.city).appendTo(tr);
$("#tabUsers").append(tr);
});
},
complete:function(){ //请求完成时的事件，不论成功或失败
$("#msg").html("");
},
error:function (xhr, textStatus, errorThrown) { //错误时
alert(xhr+textStatus+errorThrown);
}
});
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
运行结果：
## 9.7、AJAX添加用户
UserController
[](javascript:void(0); "复制代码")
~~~
package com.zhangguo.action;
import java.io.IOException;
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 com.zhangguo.dao.UserDao;
import com.zhangguo.entity.User;
/**
* 用户控制器
*/
@WebServlet("/UserController")
public class UserController extends HttpServlet {
private static final long serialVersionUID = 1L;
private UserDao userDao = new UserDao();
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
request.setCharacterEncoding("utf-8");
String action = request.getParameter("action");
if (action.equals("list")) {
list(response); //获得所有用户
}else if (action.equals("add")) {
add(request, response); //添加新用户
}
}
/**添加新用户*/
public void add(HttpServletRequest request, HttpServletResponse response) throws IOException {
String name = request.getParameter("name");
String city = request.getParameter("city");
userDao.addUser(new User(name, city));
delay();
response.getWriter().print("{\"msg\":\"添加成功\"}");
}
/**获得所有用户*/
public void list(HttpServletResponse response) throws IOException {
String result = "[";
for (User user : userDao.getAllUsers()) {
result += "{\"id\":" + user.getId() + ",\"name\":\"" + user.getName() + "\",\"city\":\""
+ user.getCity() + "\"},";
}
if (result.substring(result.length() - 1, result.length()).equals(",")) {
result = result.substring(0, result.length() - 1);
}
result += "]";
delay();
response.getWriter().print(result);
}
public void delay(){
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
~~~
[](javascript:void(0); "复制代码")
index.html
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
<style type="text/css">
#loading{
display: none;
}
</style>
</head>
<body>
<h2>jQuery AJAX</h2>
<table border="1" id="tabUsers" width="100%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>城市</th>
</tr>
</table>
<p></p>
<fieldset>
<legend>用户信息</legend>
<p>
<label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span>
</p>
<p>
<label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span>
</p>
<p>
<button type="button" id="btnSave">保存</button>
<button type="button" id="btnUpdate">更新</button>
</p>
</fieldset>
<div id="loading">
<img src="img/loading.gif" height="100"/>
</div>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var list = function() {
$.ajax({
type: "get", //请求类型
url: "UserController?action=list", //路径
beforeSend: function() { //请求前的事件
$("#loading").show(500);
},
success: function(data) { //请求成功后的事件
$("#tabUsers tr:gt(0)").remove(); //移除表格中除第一行以外的数据
$.each(data, function(i, obj) {
var tr = $("<tr/>");
$("<td/>").html(obj.id).appendTo(tr);
$("<td/>").html(obj.name).appendTo(tr);
$("<td/>").html(obj.city).appendTo(tr);
$("#tabUsers").append(tr);
});
},
complete: function() { //请求完成时的事件，不论成功或失败
$("#loading").hide(500);
},
error: function(xhr, textStatus, errorThrown) { //错误时
alert(xhr + textStatus + errorThrown);
}
});
}
list();
//添加
$("#btnSave").click(function(){
$.ajax({
url:"UserController?action=add", //请求地址
data:{name:$("#name").val(),city:$("#city").val()}, //发送给后台的数据
type:"post", //请求类型
beforeSend:function(){ //请求前
$("#loading").show(500);
$("#btnSave").prop("disabled",true).html("请求中...");
},
success:function(data){ //请求成功事件
alert(data.msg);
list(); //重新绑定
},
complete:function(){ //请求完成，不论成功或失败
$("#loading").hide(500);
$("#btnSave").prop("disabled",false).html("保存");
}
});
});
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
效果：
## 9.8、序列化与反序列化
示例下载：[https://files.cnblogs.com/files/best/Ajax14301.zip](https://files.cnblogs.com/files/best/Ajax14301.zip)
[](javascript:void(0); "复制代码")
~~~
在解析JSON方面，无疑JACKSON是做的最好的，下面从几个方面简单复习下。
FASTJSON
JACKSON
1 JAVA 对象转为JSON
import java.io.File;
import java.io.IOException;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
public class JacksonExample {
public static void main(String[] args) {
User user = new User();
ObjectMapper mapper = new ObjectMapper();
try {
// convert user object to json string, and save to a file
mapper.writeValue(new File("c:\\user.json"), user);
// display to console
System.out.println(mapper.writeValueAsString(user));
} catch (JsonGenerationException e) {
e.printStackTrace();
} catch (JsonMappingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
输出为：
{"age":29,"messages":["msg 1","msg 2","msg 3"],"name":"mkyong"}
2 JSON反序列化为JAVA对象
import java.io.File;
import java.io.IOException;
import org.codehaus.jackson.JsonGenerationException;
import org.codehaus.jackson.map.JsonMappingException;
import org.codehaus.jackson.map.ObjectMapper;
public class JacksonExample {
public static void main(String[] args) {
ObjectMapper mapper = new ObjectMapper();
try {
// read from file, convert it to user class
User user = mapper.readValue(new File("c:\\user.json"), User.class);
// display to console
System.out.println(user);
} catch (JsonGenerationException e) {
e.printStackTrace();
} catch (JsonMappingException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
输出：User [age=29, name=mkyong, messages=[msg 1, msg 2, msg 3]]
3 在上面的例子中，如果要输出的JSON好看点，还是有办法的，就是使用
defaultPrettyPrintingWriter()方法，例子为：
User user = new User();
ObjectMapper mapper = new ObjectMapper();
System.out.println(mapper.defaultPrettyPrintingWriter().writeValueAsString(user));
则输出整齐：
{
"age" : 29,
"messages" : [ "msg 1", "msg 2", "msg 3" ],
"name" : "mkyong"
}
Jackson 格式化日期问题
Jackson 默认是转成timestamps形式的，如何使用自己需要的类型，
解决办法： 1、在实体字段上使用@JsonFormat注解格式化日期
@JsonFormat(locale="zh", timezone="GMT+8", pattern="yyyy-MM-dd HH:mm:ss")
2、通过下面方式可以取消timestamps形式
objectMapper.configure(SerializationFeature.WRITE_DATES_AS_TIMESTAMPS, false);
自定义输出格式
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
objectMapper.setDateFormat(sdf)
~~~
[](javascript:void(0); "复制代码")
jsonutil
[](javascript:void(0); "复制代码")
~~~
package com.zhangguo.test;
import java.text.SimpleDateFormat;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class JsonUtils {
/**
* 序列化成json
* */
public static String toJson(Object obj) {
// 对象映射器
ObjectMapper mapper = new ObjectMapper();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy年MM月dd HH:mm:ss");
mapper.setDateFormat(sdf);
String result = null;
// 序列化user对象为json字符串
try {
result = mapper.writeValueAsString(obj);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
return result;
}
/**
* 反序列化成对象
* */
public static <T> T toObject(String json,Class<T> valueType) {
//对象映射器
ObjectMapper mapper=new ObjectMapper();
T result=null;
try {
result=mapper.readValue(json,valueType);
}catch (Exception e) {
e.printStackTrace();
}
return result;
}
}
~~~
[](javascript:void(0); "复制代码")
## 9.9、原生AJAX
api帮助：[https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest)
参考示例：[https://www.cnblogs.com/best/p/6196202.html](https://www.cnblogs.com/best/p/6196202.html)
简单示例：
[](javascript:void(0); "复制代码")
~~~
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
~~~
[](javascript:void(0); "复制代码")
`XMLHttpRequest` 最初由微软设计，随后被 Mozilla、Apple 和 Google采纳。如今，该对象已经被 [W3C组织标准化](http://www.w3.org/TR/XMLHttpRequest/ "http://www.w3.org/TR/XMLHttpRequest/")。 通过它，你可以很容易的取回一个 URL 上的资源数据。尽管名字里有 XML，但 `XMLHttpRequest` 可以取回所有类型的数据资源，并不局限于 XML。而且除了 [HTTP](https://developer.mozilla.org/zh-cn/HTTP "zh-cn/HTTP") ，它还支持 `file` 和 `ftp` 协议。
### XHR构造函数
[`XMLHttpRequest()`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/XMLHttpRequest "关于XMLHttpRequest用法的详细信息，请参考 使用 XMLHttpRequest.")
构造函数初始化一个 `XMLHttpRequest` 对象。必须在所有其他方法被调用前调用构造函数。
### XHR属性
此接口继承了 [`XMLHttpRequestEventTarget`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequestEventTarget "XMLHttpRequestEventTarget是一个描述事件处理程序的接口，你可以在一个用于处理XMLHttpRequest事件的对象中使用到该事件处理程序。") 和 [`EventTarget`](https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget "EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。") 的属性。
| 属性 | 类型 | 描述 |
| --- | --- | --- |
|
`onreadystatechange`
| `Function?` |
一个JavaScript函数对象，当readyState属性改变时会调用它。回调函数会在user interface线程中调用。
**警告:** 不能在本地代码中使用. 也不应该在同步模式的请求中使用.
|
| `readyState` | `unsigned short` |
请求的五种状态
值状态描述0UNSENT (未打开)open()方法还未被调用.1OPENED (未发送)open()方法已经被调用.2HEADERS_RECEIVED (已获取响应头)send()方法已经被调用, 响应头和响应状态已经返回.3LOADING (正在下载响应体)响应体下载中; responseText中已经获取了部分数据.4DONE (请求完成)整个请求过程已经完毕.
|
| `response` | varies |
响应实体的类型由 `[responseType](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest#responseType) 来指定，` 可以是 `[ArrayBuffer](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer "ArrayBuffer")，` `[Blob](https://developer.mozilla.org/zh-cn/DOM/Blob "zh-cn/DOM/Blob")，` [`Document`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document "Document 接口提供了一些在浏览器服务中作为页面内容入口点而加载的一些页面，也就是 DOM 树。 DOM 树包括诸如 和 之类的元素，及其他元素。其也为文档（document）提供了全局性的函数，例如获取页面的 URL、在文档中创建新的 element 的函数。")， JavaScript 对象 (即 "json")， 或者是字符串。如果请求未完成或失败，则该值为 `null。`
|
| `responseText` | `DOMString` | 此次请求的响应为文本，或是当请求未成功或还未发送时为 `null。`**只读。** |
| `responseType` | `XMLHttpRequestResponseType` |
设置该值能够改变响应类型。就是告诉服务器你期望的响应格式。
ValueData type of response property"" (空字符串)字符串(默认值)"arraybuffer"ArrayBuffer"blob"Blob"document" 和 之类的元素，及其他元素。其也为文档（document）提供了全局性的函数，例如获取页面的 URL、在文档中创建新的 element 的函数。" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document" style="margin: 0px; padding: 0px; font-family: "microsoft yahei" !important; color: rgb(0, 0, 0); text-decoration: underline;">Document"json"JavaScript 对象，解析自服务器传递回来的JSON 字符串。"text"字符串
|
| `responseXML` | `Document?` |
本次请求的响应是一个 `[Document](https://developer.mozilla.org/zh-cn/DOM/document "zh-cn/DOM/Document")` 对象，如果是以下情况则值为 `null：`请求未成功，请求未发送，或响应无法被解析成 XML 或 HTML。当响应为text/xml 流时会被解析。当 `responseType` 设置为"document"，并且请求为异步的，则响应会被当做 `text/html` 流来解析。**只读****.**
**注意:** 如果服务器不支持 `text/xml` Content-Type 头，你可以使用 `overrideMimeType() 强制``XMLHttpRequest` 将响应解析为 XML。
|
| `status` | `unsigned short` | 该请求的响应状态码 (例如, `状态码`200 表示一个成功的请求).**只读.** |
| `statusText` | `DOMString` | 该请求的响应状态信息,包含一个状态码和原因短语 (例如 "`200 OK`"). **只读****.** |
| `upload` | `XMLHttpRequestUpload` | 可以在 `upload 上添加一个事件监听来跟踪上传过程。` |
| `withCredentials` | `boolean` |
表明在进行跨站(cross-site)的访问控制(Access-Control)请求时，是否使用认证信息(例如cookie或授权的header)。 默认为 `false。`
**注意:** 这不会影响同站(same-site)请求.
|
### XHR非标准属性
| Attribute | Type | Description |
| --- | --- | --- |
| `channel` | `[nsIChannel](https://developer.mozilla.org/zh-CN/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIChannel)` | The channel used by the object when performing the request. This is `null` if the channel hasn't been created yet. In the case of a multi-part request, this is the initial channel, not the different parts in the multi-part request. **Requires elevated privileges to access; ****只读****.** |
| `mozBackgroundRequest` | `boolean` |
Indicates whether or not the object represents a background service request. If `true`, no load group is associated with the request, and security dialogs are prevented from being shown to the user. **Requires elevated privileges to access.**
In cases in which a security dialog (such as authentication or a bad certificate notification) would normally be shown, the request simply fails instead.
|
| `mozResponseArrayBuffer`已废弃 Gecko 6 | [`ArrayBuffer`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer "ArrayBuffer") | The response to the request, as a JavaScript typed array. This is NULL if the request was not successful, or if it hasn't been sent yet. **只读** |
| `multipart` | `boolean` |
Indicates whether or not the response is expected to be a stream of possibly multiple XML documents. If set to `true`, the content type of the initial response must be `multipart/x-mixed-replace` or an error will occur. All requests must be asynchronous.
This enables support for server push; for each XML document that's written to this request, a new XML DOM document is created and the `onload` handler is called between documents.
**注意:** 当这个属性被开启，XMLdocument被初次加载后onload事件处理器以及其它事件处理器不会被重置，并且onload事件处理器会在每一次响应接收的时候被调用。
|
### XHR方法
### abort()
如果请求已经被发送,则立刻中止请求.
### getAllResponseHeaders()
~~~html
DOMString getAllResponseHeaders();
~~~
返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回`null`.** 注意:** For multipart requests, this returns the headers from the current part of the request, not from the original channel.
### getResponseHeader()
~~~html
DOMString? getResponseHeader(DOMString header);
~~~
返回指定的响应头的值, 如果响应头还没被接受,或该响应头不存在,则返回null.
### open()
初始化一个请求. 该方法用于JavaScript代码中;如果是本地代码, 使用 [`openRequest()`](https://developer.mozilla.org/zh-cn/nsIXMLHttpRequest#openRequest() "/zh-cn/XMLHttpRequest#openRequest()")方法代替.
**注意:** 在一个已经激活的request下（已经调用open()或者openRequest()方法的request）再次调用这个方法相当于调用了abort（）方法。
~~~html
void open(
DOMString method,
DOMString url,
optional boolean async,
optional DOMString user,
optional DOMString password
);
~~~
###### 参数
`method`
请求所使用的HTTP方法; 例如 "GET", "POST", "PUT", "DELETE"等. 如果下个参数是非HTTP(S)的URL,则忽略该参数.
`url`
该请求所要访问的URL
`async`
一个可选的布尔值参数，默认为true,意味着是否执行异步操作，如果值为false,则send()方法不会返回任何东西，直到接受到了服务器的返回数据。如果为值为true，一个对开发者透明的通知会发送到相关的事件监听者。这个值必须是true,如果multipart 属性是true，否则将会出现一个意外。
`user`
用户名,可选参数,为授权使用;默认参数为空string.
`password`
密码,可选参数,为授权使用;默认参数为空string.
### overrideMimeType()
重写由服务器返回的MIME type。这个可用于, 例如，强制把一个响应流当作“text/xml”来处理和解析,即使服务器没有指明数据是这个类型。注意，这个方法必须在send()之前被调用。
~~~html
void overrideMimeType(DOMString mimetype);
~~~
### send()
发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
**注意:** 所有相关的事件绑定必须在调用`send()方法之前进行`.
~~~html
void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);
~~~
#### 注意
如果发送的数据是个文档，它会在发送之前进行序列化。当发送一个文档，Firefox高于3的版本会对发送的请求使用UTF-8编码；[Firefox 3](https://developer.mozilla.org/zh-cn/Firefox_3 "zh-cn/Firefox_3") 也可以支持发送文档的时候通过使用`body.xmlEncoding`指定编码方式，如果不指定则默认使用UTF-8编码。
If it's an `nsIInputStream`, it must be compatible with `nsIUploadChannel`'s `setUploadStream()`method. In that case, a Content-Length header is added to the request, with its value obtained using `nsIInputStream`'s `available()`method. Any headers included at the top of the stream are treated as part of the message body. The stream's MIMEtype should be specified by setting the Content-Type header using the [`setRequestHeader()`](https://developer.mozilla.org/zh-cn/nsIXMLHttpRequest#setRequestHeader() "/zh-cn/XMLHttpRequest#setRequestHeader()")method prior to calling `send()`.
### setRequestHeader()
给指定的HTTP请求头赋值.在这之前,你必须确认已经调用 [`open()`](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest#open) 方法打开了一个url.
~~~html
void setRequestHeader(
DOMString header,
DOMString value
);
~~~
#### 参数
`header`
将要被赋值的请求头名称.
`value`
给指定的请求头赋的值.
### 非标准方法
#### init()
在 C++代码中初始化一个XHR对象.
**警告:** 该方法不能在 JavaScript 代码中使用.
~~~html
[noscript] void init(
in nsIPrincipal principal,
in nsIScriptContext scriptContext,
in nsPIDOMWindow ownerWindow
);
~~~
##### 参数
`principal`
主要用于请求;不可以为null.
`scriptContext`
请求上下文;不可以为null.
`ownerWindow`
和窗口相关请求; 可能为null.
#### openRequest()
初始化一个请求. 这个方法用于本地代码; 如果用JavaScript 代码来初始化请求, 使用 [`open()`](https://developer.mozilla.org/zh-cn/nsIXMLHttpRequest#open() "/zh-cn/XMLHttpRequest#open()")代替. 看文档`open()`.
### sendAsBinary()
发送二进制数据 的`send()`方法变种.
~~~html
void sendAsBinary(
in DOMString body
);
~~~
##### 参数
`body`
请求体的DOMstring。这个数据已由一系列单字节字符截取（移除每个字符的高位字节）转换成了字符串。
## 9.10、原生AJAX示例
代码：
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生ajax</title>
</head>
<body>
<h2>原生ajax</h2>
<h3 id="time"></h3>
<button type="button" onclick="getTime_click()">获得服务器时间</button>
<script>
function getXHR(){
//判断是否拥有xhr对象
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
//ie6,ie5下的xhr对象获得办法
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function getTime_click(){
var xhr=getXHR();
//当状态变化时的事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4){ //请求成功
if(xhr.status==200){ //服务器响应状态成功
//将从服务器获得的数据显示在页面上
document.getElementById("time").innerHTML= xhr.responseText;
}
}
}
//打开请求
xhr.open("GET","GetTime",true); //请求类型,路径,是否为异步请求
//发送请求
xhr.send(null); //参数
}
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
Servlet:
[](javascript:void(0); "复制代码")
~~~
package com.zhangguo.action;
import java.io.IOException;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/GetTime")
public class GetTime extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().write(new Date().toString());
}
}
~~~
[](javascript:void(0); "复制代码")
结果：
jQuery ajax请求
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生ajax</title>
</head>
<body>
<h2>原生ajax</h2>
<h3 id="time"></h3>
<button type="button" onclick="getTime_click()">获得服务器时间</button>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
function getTime_click(){
$.get("GetTime",function(data){$("#time").html(data); });
}
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
## 9.11、AJAX用户示例
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
<style type="text/css">
#loading{
display: none;
}
</style>
</head>
<body>
<h2>jQuery AJAX</h2>
<table border="1" id="tabUsers" width="100%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>城市</th>
<th>操作</th>
</tr>
</table>
<p></p>
<fieldset>
<legend>用户信息</legend>
<p>
<label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span>
</p>
<p>
<label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span>
</p>
<p>
<button type="button" id="btnSave">保存</button>
<button type="button" id="btnUpdate">更新</button>
</p>
</fieldset>
<div id="loading">
<img src="img/loading.gif" height="100"/>
</div>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var list = function() {
$.ajax({
type: "get", //请求类型
url: "UserController?action=list", //路径
beforeSend: function() { //请求前的事件
$("#loading").show(500);
},
success: function(data) { //请求成功后的事件
$("#tabUsers tr:gt(0)").remove(); //移除表格中除第一行以外的数据
$.each(data, function(i, obj) {
var tr = $("<tr/>");
$("<td/>").html(obj.id).appendTo(tr);
$("<td/>").html(obj.name).appendTo(tr);
$("<td/>").html(obj.city).appendTo(tr);
var del=$("<a href='#' class='del'>删除 | </a>").data("id",obj.id);
var edit=$("<a href='#' class='edit'>编辑</a>").data("user",obj);
$("<td/>").append(del).append(edit).appendTo(tr);
$("#tabUsers").append(tr);
});
},
complete: function() { //请求完成时的事件，不论成功或失败
$("#loading").hide(500);
},
error: function(xhr, textStatus, errorThrown) { //错误时
alert(xhr + textStatus + errorThrown);
}
});
}
list();
//添加
$("#btnSave").click(function(){
$.ajax({
url:"UserController?action=add", //请求地址
data:{name:$("#name").val(),city:$("#city").val()}, //发送给后台的数据
type:"post", //请求类型
beforeSend:function(){ //请求前
$("#loading").show(500);
$("#btnSave").prop("disabled",true).html("请求中...");
},
success:function(data){ //请求成功事件
alert(data.msg);
list(); //重新绑定
},
complete:function(){ //请求完成，不论成功或失败
$("#loading").hide(500);
$("#btnSave").prop("disabled",false).html("保存");
}
});
});
$("#tabUsers").on("click",".del",function(){
var id=$(this).data("id");
//发送ajax get请求
$.get("UserController?action=del",{"id":id},function(data){
alert(data.msg);
list();
});
});
var user=null;
$("#tabUsers").on("click",".edit",function(){
user=$(this).data("user");
$("#name").val(user.name);
$("#city").val(user.city);
});
//更新事件
$("#btnUpdate").click(function(){
user.name=$("#name").val();
user.city=$("#city").val();
//向服务器发送post请求
$.post("UserController?action=update",user,function(data){
alert(data.msg);
list();
});
});
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
## 9.12、artDialog弹出层
帮助：[http://aui.github.io/artDialog/doc/index.html](http://aui.github.io/artDialog/doc/index.html)
应用：[https://www.cnblogs.com/best/p/6196202.html](https://www.cnblogs.com/best/p/6196202.html)
上课示例：[https://files.cnblogs.com/files/best/Ajax14301\_2.zip](https://files.cnblogs.com/files/best/Ajax14301_2.zip)
示例：
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>artDialog</title>
<link rel="stylesheet" type="text/css" href="js/artDialog7/css/dialog.css"/>
<style type="text/css">
#formUser{
display: none;
}
</style>
</head>
<body>
<h2>artDialog</h2>
<button type="button" onclick="click1()">提示</button>
<button type="button" onclick="click2()">添加用户</button>
<button type="button" onclick="click3()">加载中</button>
<fieldset id="formUser">
<legend>用户信息</legend>
<p>
<label for="name">姓名：</label> <input type="text" name="name" id="name" placeholder="请输入姓名" /> <span id="nameMsg" class="red"></span>
</p>
<p>
<label for="city">城市：</label> <input type="text" name="city" id="city" placeholder="请输入城市" /> <span id="cityMsg" class="red"></span>
</p>
<p>
<button type="button" id="btnSave">保存</button>
<button type="button" id="btnUpdate">更新</button>
</p>
</fieldset>
<script src="js/jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/artDialog7/dist/dialog.js" type="text/javascript" charset="utf-8"></script>
<script>
function click1(){
var d=dialog({
title:"提示",
content:"恭喜您，删除成功!",
okValue: '确定',
ok:function(){
setTimeout(function(){
d.close().remove();
},2000);
return false;
},
cancel:function(){
}
});
d.show();
}
function click2(){
var d=dialog({
title:"添加用户",
modal:true,
backdropOpacity:0.2,
width:'600px',
height:'300px',
content:$("#formUser")
});
d.show();
}
var box
function click3(){
var box=dialog({
modal:true
});
box.show();
};
</script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
结果：
## 9.13、Bootstrap基础
http://www.layui.com/
http://www.h-ui.net/H-ui.admin.shtml
移动端
http://www.dcloud.io/mui.html
http://m.sui.taobao.org/components/#forms
http://www.bootCSS.com
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootStrap Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<h1>Hello, Bootstrap!</h1>
<p>这是我的第一个bootstrap页面！</p>
<p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
<script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
效果
## 9.14、在线可视化布局系统
http://www.ibootstrap.cn/
http://www.bootcss.com/p/layoutit/
示例：
代码：
[](javascript:void(0); "复制代码")
~~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootStrap Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" />
</div> <button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<h1>
Hello, world!
</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="carousel slide" id="carousel-941720">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-941720">
</li>
<li data-slide-to="1" data-target="#carousel-941720">
</li>
<li data-slide-to="2" data-target="#carousel-941720">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" />
<div class="carousel-caption">
<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" />
<div class="carousel-caption">
<h4>
Second Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
<div class="item">
<img alt="" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" />
<div class="carousel-caption">
<h4>
Third Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-941720" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-941720" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-4 column">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4 column">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<div class="col-md-4 column">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/people/default.jpg" />
<div class="caption">
<h3>
Thumbnail label
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Action</a>
<a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/city/default.jpg" />
<div class="caption">
<h3>
Thumbnail label
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Action</a>
<a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/600/200/sports/default.jpg" />
<div class="caption">
<h3>
Thumbnail label
</h3>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-primary" href="#">Action</a>
<a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-8 column">
<table class="table">
<thead>
<tr>
<th>
编号
</th>
<th>
产品
</th>
<th>
交付时间
</th>
<th>
状态
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Default
</td>
</tr>
<tr class="success">
<td>
1
</td>
<td>
TB - Monthly
</td>
<td>
01/04/2012
</td>
<td>
Approved
</td>
</tr>
<tr class="error">
<td>
2
</td>
<td>
TB - Monthly
</td>
<td>
02/04/2012
</td>
<td>
Declined
</td>
</tr>
<tr class="warning">
<td>
3
</td>
<td>
TB - Monthly
</td>
<td>
03/04/2012
</td>
<td>
Pending
</td>
</tr>
<tr class="info">
<td>
4
</td>
<td>
TB - Monthly
</td>
<td>
04/04/2012
</td>
<td>
Call in to confirm
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-4 column">
<h2>
Heading
</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
~~~
[](javascript:void(0); "复制代码")
结果：
- 空白目录
- 常用功能
- PHP中常用的header头部定义
- 压缩包下载1
- 压缩包下载2
- 文件下载
- php常用加密函数总结
- url请求参数加解密
- PHP操作大全
- 指定月份的第某个月
- PHP 数组和字符串互相转换实现方法
- php字符串截取的简单方法
- php 根据子分类循环获取其父级分类
- PHP文件操作功能函数大全
- PHP常用到的功能函数
- 自定义php常用函数110个
- 自定义PHP常用功能函数
- 开发中常用自定义小功能函数
- PHP判断远程文件是否存在
- PHP写文件函数
- PHP生成GUID的函数
- PHP常用正则表达式汇总
- php字符串压缩
- PHP无限分组
- PHP简单 对象(object) 与 数组(array) 的转换
- PHP数组常用函数
- PHP调式测试函数
- PHP常用字符串的操作函数
- mysql 常用内置函数
- PHP通用请求函数CURL封装
- 裁剪图片PHP代码
- PDO操作MYSQL封装类
- 10个实用的PHP代码片段
- 获取访问者IP地址
- PHP实现发红包程序
- PHP把文本转换成图片
- curl重写php file_get_contents
- PHP生成一个随机字符串
- PHP读文件和写文件
- PHP根据key 给二维数组分组
- php中curl模拟post提交多维数组
- 33个超级有用必须要收藏的PHP代码样例
- PHP防XSS 防SQL注入的代码
- php常用数组array函数实例总结
- 用PHP遍历目录下的全部文件
- GBK2UTF8
- php函数类库
- 一、php一些常用的校验
- 1.1、校验是否为空(null/空串)1
- 1.2、校验是否为纯数字1
- 1.3、校验是否为纯数字(正则)1
- 1.4、检验手机号1
- 1.5、校验邮箱格式1
- 1.6、检查密码长度是否符合规定1
- 二、手机类型访问判断
- 三、字符集文件转换
- 3.1、utf8转gbk
- 3.2、gbk转utf8
- 3.3、繁体转简体
- 3.4、简体转繁体
- 3.5、unicode转utf8
- 3.6、utf8转unicode
- 3.7、Ascii转拼音
- 3.8、gbk转拼音
- 3.9、数组 utf8转gbk
- 3.10、数组 gbk转utf8
- 3.11、json 处理gbk转码utf-8问题（ json_encode转换数组，值为null）
- 3.12、Unicode解码
- 四、文档目录操作
- 4.1、转化 \ 为 /
- 4.2、创建目录
- 4.3、拷贝目录及下面所有文件
- 4.4、转换目录下面的所有文件编码格式
- 4.5、列出目录下所有文件
- 4.6、设置目录下面的所有文件的访问和修改时间
- 4.7、目录列表
- 4.8、删除目录及目录下面的所有文件
- 4.9、取得文件扩展
- 4.10、查询字符是否存在于某字符串
- 4.11、获取文件目录列表
- 4.12、删除一个路径下的所有文件夹和文件的方法
- 4.13、文件下载
- 五、session与cookie
- 5.1、设置session
- 5.2、读取session
- 5.3、清除session
- 六、CURL操作
- 6.1、发起get请求
- 6.2、发起post请求
- 6.3、curl获取跳转后的网址的url
- 6.4、curl判断远程图片是否加防盗链
- 6.5、curl获取301页面的内容
- 6.6、curl判断文件是否存在（404）
- 6.7、php的curl封装类
- 七、日期、时间与字节转换
- 7.1、转换字节数为其他单位（Gb、Mb等）
- 7.2、时间转换（将秒转换为时间）
- 7.3、将秒转换成 天-时分秒
- 7.4、时间转换（将时分秒转换为秒）
- 7.5、计算两个时间相差的天
- 7.6、获取文件大小并格式化
- 7.7、返回13位时间戳
- 7.8、返回与当前时间的差距，如1分钟前，2小时前，5月前等
- 7.8、PHP中DateTime的常用方法
- 八、对象、数组、字符串、转义等
- 8.1、将数组转换为对象
- 8.2、将对象转换为数组
- 8.3、将字符串转换为数组
- 8.4、将数组转换为字符串
- 8.5、将文本格式成适合js输出的字符串
- 8.6、返回经addslashes（转义）处理过的字符串或数组
- 8.7、返回经stripslashes（删除反斜杠）处理过的字符串或数组
- 8.8、返回经htmlspecialchars（字符转html）处理过的字符串或数组
- 8.9、安全过滤函数
- 8.10、xss过滤函数
- 8.11、过滤ASCII码从0-28的控制字符
- 8.12、格式化文本域内容
- 8.13、将文本格式成适合js输出的字符串
- 8.14、转义 javascript 代码标记
- 8.15、数组转码
- 8.16、php用逗号格式化数字
- 8.17、数组去重
- 8.18、字符串去重
- 8.19、数组排序
- 九、加密扩展
- 9.1、简单的字符串加密、解密函数
- 9.2、简单的加密解密类
- 9.3、简单对称加密算法2
- 9.4、常用对称加密算法（DES/AES）类
- 9.5、3des加密解密类-三重数据加密算法
- 十、随机数、获取请求ip等
- 10.1、产生随机字符串
- 10.2、获取请求ip
- 10.3、生成一定范围内的随机数字
- 10.4、生成不重复的随机数
- 10.5、生成一定数量的随机数，并且不重复
- 10.6、生成32位随机数
- 10.7、生成9位随机数字（可以做qq用）
- 十一、其他
- 11.1、php对html页面压缩函数
- 11.2、构建层级（树状）数组、
- 11.3、获取内容中的图片
- 11.4、生成sql语句，如果传入$in_cloumn 生成格式为 IN('a', 'b', 'c')
- 11.5、打印各种类型的数据，调试程序时使用。
- 11.6、URL重定向
- 11.7、替换html代码里的所有图片的url，新增url
- 11.8、去除html里的p标签
- 11.9、去除字符串中所有html代码（格式化代码html）
- 11.10、将number_format的输出转换为php数字
- 11.7、内容里批量替换图片的url地址为自己的地址
- 十二、类库
- 1、php 5.6.3PHP封装的数据库模型Model类完整示例【基于PDO】
- 2、Curl类库
- 3、php PDO数据库类库
- 4、获取网站title
- 字符串配置转数组
- 数组助手类1
- 获取随机字符串
- 获取头像存储路径
- 单位转换函数
- 获取字符串长度
- 获取中文字符拼音首字母
- 获取当前页面URL地址
- 获取n天前的时间戳
- 获取n天前0点的时间戳
- 获取ip地址所在的区域
- 邮箱验证
- PHP常用函数总结(160多个)
- PHP判断输入数据是否合法常用的类
- 无限极分类
- php ajax实现分页功能
- 代码
- html
- sendAjax.js
- data.js
- page.js
- page.css
- php基础
- 字符串
- 字符串1
- 字符串常用函数
- 数组
- 数组简介
- 数组的定义
- 数组的操作
- 1 数组的计算
- 2 for循环遍历索引数组
- 3 foreach遍历关联数组
- 4 list、each函数遍历数组
- 5 常用操作数组函数
- 数组的常用函数
- 时间
- PHP的日期和时间
- 1 获取时期时间信息函数
- 2 日期验证函数
- 3 获取本地化时间戳函数
- 4 程序执行时间检测
- 文件操作
- 文件处理系统
- 1 读取文件
- 2 创建和修改文件内容
- 3 创建临时文件
- 4 移动、拷贝和删除文件
- 5 检测文件属性函数
- 6 文件常用函数和常量
- 7 文件锁处机制
- 8 目录处理函数
- 9 文件权限设置
- 10文件路径函数
- 11 小小文件留言本
- 12 修改配置文件的实例
- 流程控制
- 流程控制结构
- if条件结构流程
- 1 if语句
- 2 嵌套if...else...elseif结构
- 3 if语句多种嵌套
- 分支结构switch语句的使用
- 循环语句的使用
- 1 while循环
- 2 do...while循环的区别
- 3 for循环控制语句
- 4 goto语法
- 5 declare 语法
- 函数
- PHP函数
- 自定义函数
- 自定义函数高级调用
- 1 回调函数
- 2 变量函数
- 3 匿名函数
- 4 内部函数
- 5 变量作用域
- 6 参数的引用
- 7 递归函数
- 8 静态变量
- 使用系统内置函数
- 文件包含函数
- 数学常用函数
- 正则
- PHP正则表达式
- 1 正则表达示的定界符
- 2 正则表达示中的原子
- 3 正则表示中的元字符
- 4 正则达达示中的模式修正符
- 5 写正则的诀窍和常用正则
- 6 用正则写一个UBB文本编辑器
- 常用正则
- 错误处理
- 1 禁止显示错误
- 2 错误报告级别
- 3 错误记录日志
- 4 自定义错误处理函数
- 错误及异常处理机制、错误日志
- 过滤器
- 表达式
- PHP基本语法
- PHP基本语法（一）
- PHP基本语法（二）
- GD库图像处理
- 文件上传和下载
- PHP文件上传
- 1 文件上传需要注意php.ini文件
- 2 文件上传的步骤
- 3 文件上传表单注意事项
- 4 按照数组和步骤完成文件上传
- 5 多文件上传
- 6 文件上传进度处理
- PHP图像处理
- 1 学习前的准备工作
- 2 用图片处理函数画一张图
- 3 生成验证码
- 4 图像缩放和裁剪技术
- 5 图片水印处理
- 常量和变量
- 1 用常量限制用户跳过某些文件
- .2 可变变量
- 3 外部变量
- 4 环境变量
- 5 变量引用
- PHP表达式与运算符
- 1 算术运算
- 2 赋值运算
- 3 自加、自减运算
- 4 比较运算
- 5 逻辑运算
- 6 位运算
- 7 运算符优先级
- 8 三元运算符和其它运算符
- 会话管理和控制
- 1 Cookie概述
- 2PHP中的Cookie
- 3 session概述
- 4 PHP中使用session
- 5 SESSION应用实例
- 会话技术(cookie session)
- 会话技术 session场景使用介绍！
- PHP.in中session和cookie的配置说明
- 通过cURL来做小偷程序
- 1 curl的使用步骤
- 2 自定义get方法抓取网页
- 3 使用post发送数据
- PHP基础数据类型及运算符介绍
- 数据类型
- 1 整型就是整数
- 2 布尔就是易经的知识
- 3 字符串
- 4 浮点型
- 5 重要：if和else语法
- 6 NULL类型
- 7对象以后会学
- 8 数组会有单纯的一个章节
- 9 资源类型
- 10 眼前了解回调类型即可
- 11 查看和判断数据类型
- 12 数据类型的自动转换和强制转换
- PHP版本
- php自动加载
- xml的介绍
- openssl的介绍
- php文件管理
- 数据库Mysql
- 数据库之MySQL(概述)
- PHP数据库编程
- 数据库编程（2）
- SQL常见的可优化点
- Mysql设计与优化专题
- mysql的最佳索引攻略
- 详解慢查询
- ER图，数据建模与数据字典
- 数据中设计中的范式与反范式
- 字段类型与合理的选择字段类型
- 表的垂直拆分和水平拆分
- 21分钟 MySQL 入门教程
- 一、MySQL的相关概念介绍
- 二、Windows下MySQL的配置
- 三、MySQL脚本的基本组成
- 四、MySQL中的数据类型
- 五、使用MySQL数据库
- 六、操作MySQL数据库
- 七、创建后的修改
- 八、附录
- 3天入门MySQL
- 前言1
- 01. 数据库的用途和概念
- 02. 娱乐化讲解表关系
- 03. mysql 数据库安装
- 04. 数据语句操作类型
- 05. 连接数据库
- 06. 数据库结构定义语句
- 6.2 数据表操作
- 6.1 数据库操作
- 6.3 数据字段操作
- 07. 类型、字符集、引擎和索引
- 7.1 数据类型
- 7.2 字符集
- 7.3 表引擎
- 7.4 索引
- 08. 增删改查
- 12.8.1 插入记录
- 12.8.2 查询记录
- 12.8.3 多表联合查询
- 12.8.4 更新记录
- 12.8.5 删除记录
- 09. DCL语句
- 10. 常用工具简介
- 附录1 . 学习MySQL常用的英文单词
- MySQL 超新手入门
- （1） 重新开始
- （2） 数据库概论和 MySQL 安装
- （3） SELECT 基础查询
- （4） 运算式和函数
- （5） JOIN 和 UNION 查询
- （6） CRUD 和资料维护
- （7） 字符集和数据库
- （8） 存储引擎和数据类型
- （9） 表格和索引
- （10） 子查询
- （11） 视图
- （12） 预处理语句
- （13） 存储过程入门
- （14） 存储过程的变量和流程
- （15） 存储过程进阶
- （16） 触发器
- （17） 资料库资讯
- （18） 错误处理和查询
- （19） 导入和导出数据
- （20） 性能
- php常用类
- 面向对象
- 面向对象(OOP)编程完全教程
- 1.什么是面向对象
- 2.什么是类，什么是对象，类和对象这间的关系
- 3.什么是面向对象编程呢
- 4.如何抽象出一个类
- 5.如何实例化对象
- 6.如何去使用对象中的成员
- 7.特殊的引用this的使用
- 8.构造方法__construct()与析构方法__destruct()
- 9.封装性（var与public，protected，private的关系）
- 10.__set()，__get()，__isset()，__unset()四个方法的应用
- 11.类的继承
- 12.重载新的方法（parent::）
- 13.访问类型（public，protected，private）
- 14.final关键字的应用
- 15.static和const关键字的使用（self::）
- 16.__toString()方法
- 17.克隆对象__clone()方法
- 18.__call()处理调用错误
- 19.抽象方法和抽象类（abstract）
- 20.PHP5接口技术(interface)
- 21.多态的应用
- 22.把对象串行化serialize()方法，__sleep()方法，__wakeup()方法
- 23.自动加载类 __autoload()函数
- PHPer进阶
- 单例模式
- 工厂方法模式
- 适配器模式
- 建造者模式(通过选择mysql,mongo数据库链接类型做说明)
- 委托模式
- 对象基础实践
- 深入了解面向对象高级特性
- 抽象类和接口类的实际作用
- PHP解决问题进化论(整理笔记)
- PHP7新特性整理介绍篇
- php-fpm 与 Nginx优化总结
- Centos+Nginx+PHP7.0编译安装(和PHP5.6老版本共存)
- PHP7:Mongodb API使用
- PHP之include/require深入了解
- PHP内核了解：生命周期及运行模式
- 面向对象总结
- 基础概念
- 什么是类
- 什么是对象
- 静态属性
- 三大特征
- 封装
- 继承
- 多态
- 9个常用的魔术方法
- __construct
- __destruct
- __call
- __get
- __set
- __sleep
- __toString
- __clone
- __autoload
- 抽象类
- 对象接口
- 面向对象设计模式
- 前言
- （一），单例模式
- （二），Builder模式
- （三），原型模式
- （四），工厂方法模式
- （五），策略模式
- （六），状态模式
- （七），观察者模式
- （八），责任链模式
- （九），适配器模式
- （十），代理模式
- （十一），装饰模式
- （十二），外观模式
- （十三），解释器模式
- PHP开发第一步，PHP5.6 + MySQL5.5 + Apache2.4环境搭建
- 面向对象1
- 类和对象
- 面向对象高级
- php编程总结
- PHP学习笔记
- MySQL学习笔记
- php基础知识
- javascript
- javascript DOM总结
- JavaScript (JS) 函数补充 (含arguments、eval()、四种调用模式)
- JavaScript (JS) 面向对象编程 浅析 (含对象、函数原型链、闭包解析)
- JavaScript (JS)基础：BOM 浅析 (含window对象相关基本方法、属性解析)
- JavaScript (JS)基础：DOM 浅析 (含数组Array、字符串String基本方法解析)
- JavaScript (JS)基础：ECMAScript 浅析 (含Math基本方法解析)
- js功能函数
- 一、js一些常用的校验
- 1.1、校验是否为空(null/空串)
- 1.2、校验是否为纯数字
- 1.3、校验是否为纯数字(正则)
- 1.4、检验手机号
- 1.5、验证座机号
- 1.6、校验ip
- 1.7、检验url地址
- 1.8、检验身份证
- 1.9、检验邮箱
- 1.10、检验日期
- 1.11、检验金额
- 1.12、检验否是汉字
- 1.13、校验数字的表达式
- 1.14、校验字符的表达式
- 1.15、特殊需求表达式
- 1.16、检测密码强度
- 二、手机类型判断
- 三、返回字符串长度，汉子计数为2
- 四、获取url中的参数
- 五、js 绑定事件 适用于任何浏览器的元素绑定
- 六、获得当前浏览器JS的版本
- 七、获取当前点击事件的Object对象
- 八、字符串截取方法
- 九、JS 弹出新窗口全屏
- 十、全选/全不选
- 十一、js 判断浏览器
- 十二、JS判断两个日期大小
- 十三、移除事件
- 十四、回车提交
- 十五、JS 执行计时器
- 十六、JS 写Cookie
- 十七、JS 读Cookie
- 十八、Ajax 请求
- 十九、JS StringBuilder 用法
- 二十、JS 加载到顶部LoadJS
- 二十一、清空 LoadJS 加载到顶部的js引用
- 二十二、JS 替换非法字符
- 二十三、按Ctrl + Entert 直接提交表单
- 二十四、获取当前时间
- 二十五、Js 去掉空格方法
- 二十六、js 动态移除 head 里的 js 引用
- 二十七、整个URL 点击事件 加在URL里的onclick里
- 二十八、判断浏览器使用的是哪个 JS 版本
- 二十九、加入收藏夹
- 三十、动态加载 CSS 样式文件
- 三十一、返回脚本内容
- 三十二、清除脚本内容
- 三十三、返回按ID检索的元素对象
- 三十四、显示元素 待验证
- 三十五、与insertBefore方法（已存在）对应的insertAfter方法
- 三十六、光标停在文字的后面，文本框获得焦点时调用
- 三十七、检验URL链接是否有效
- 三十八、格式化CSS样式代码
- 三十九、压缩CSS样式代码
- 四十、 获取当前路径
- 四十一、ip 转 整型
- 四十二、整型解析为IP地址
- 四十三、删除cookies
- 四十四、判断是否以某个字符串结束
- 四十五、判断是否以某个字符串开头
- 四十六、根据样式名称检索元素对象
- 四十七、 获取移动设备初始化大小
- 四十八、 获取移动设备最大化大小
- 四十九、获取移动设备屏幕宽度
- 五十、获取页面scrollLeft
- 六十、获取页面宽度
- 六十一、获取页面scrollTop
- 六十二、获取页面可视高度
- 六十三、判断数组元素是否重复
- 六十四、生成随机数
- 六十五、数组去重
- 六十六、深度拷贝对象
- 六十七、全部替换replaceAll
- 六十八、阻止冒泡
- 六十九、返回顶部
- 七十、jsonp跨域请求
- 七十一、到某一个时间的倒计时
- 七十二、清除对象中值为空的属性
- 七十三、获取文件后缀名的方法
- 七十四、判断一个对象是不是数组类型
- 七十五、冒泡排序
- 七十六、实现一个最简单的模板引擎
- 七十七、数组最大值最小值
- 七十八、数组求和，平均值
- 七十九、从数组中随机获取元素
- 八十、返回对应元素在数组中的下标
- 八十一、返回数组（字符串）一个元素出现的次数
- 八十二、得到n1-n2下标的数组，即返回数组下标arr[n1]到数组arr[n2]的值
- 八十三、筛选数组，这里所做的就只是删除相应的数组
- 八十四、去除字符串空格
- 八十五、字母大小写切换
- 八十六、字符串循环复制，前面的要循环的字符串，后面的要循环的次数
- 八十七、字符串替换，这里的要替换的字符串必须是连续的
- 八十九、将时间戳转换成日期格式
- 九十、检验字符串是否超过某个值，超出出现省略号
- 九十一、随机码，这里的参数count必须是 2 ~ 36 之间的整数
- 九十二、查找字符串中某字符出现的次数
- 九十三、JS插入排序
- 九十四、获取前num天的日期
- 九十五、js实时计算rem,宽度大于1920px时1rem=100px
- 九十六、原生JS获取鼠标XY轴的值
- 九十七、转成XML对象
- 九十八、Js身份证验证函数
- 九十九、格式化数字串
- 一百、原生Ajax 请求
- 一百零一、两条直角边算角度
- 一百零二、禁止readonly和disabled的input退格键返回上一页
- 一百零三、生成随机字母字符串
- 一百零四、float偏移处理
- 一百零五、根据月份获取起止时间戳
- 一百零六、工具函数对象书写例子，可自己扩展
- 一百零七、js字符串压缩算法与解压
- 一百零八、指定数组元素排序（正序倒序）
- 一百零九、js所有的内置方法
- JavaScript 常用函数总结
- js常用函数整理
- JavaScript基础
- javaScript基础&DOM（一）
- javaScript基础&DOM（二）
- JavaScript语法基础1
- javascript数组对象
- javascript字符串函数
- jquery、javascript实现(get、post两种方式)跨域解决方法
- php MVC原理
- php基础知识(语法与原理)
- PHP编程经验
- 第一章 代码风格
- 第二章 代码注释
- 第三章 目录结构
- 第四章 文件管理
- 第五章 代码整理
- 第六章 路径和路由
- 第七章 实用表格
- 第八章 实用开发软件
- 第九章 技术提升心得
- 第十章 实用插件搭配
- 第十一章 常用设计模式
- PHP编码规范文档
- PHP加快执行效率的写法规范
- VUE避坑指南
- 从零开始学Vue
- Vue-cli
- PHP工具类
- 数组助手类
- 通用助手类
- 时间助手类
- 图像
- 拼音助手类
- 字符串助手类
- 验证助手类
- 时间类封装
- 数据库链式调用封装
- curl 封装 / 发送文件 / 远程下载到服务器
- php Captcha 驗證碼類
- php 替换敏感字符串
- php返回数据格式化类
- php XML文件解释类
- php CSS Update Class
- PHPMailer - PHP email transport class
- PHP 遍历文件夹及文件类及处理类
- 自动登入google play下载app report
- php click captcha 验证码类
- php 获取页面中的指定内容类
- php 支持断点续传的文件下载类
- php 缩略图生成类,支持imagemagick及gd库两种处理
- php 根据url自动生成缩略图
- php 过滤html标记属性类
- php HTTP请求类，支持GET,POST,Multipart/form-data
- php Cookies 操作类
- php 密码生成类
- php main 与 iframe 相互通讯类(同域/跨域)
- php 根据url自动生成缩略图，并处理高并发问题
- php Timer 页面运行时间监测类
- php 双向队列类
- php 导出CSV抽象类
- php zip文件内容比较类
- php 获取/设置用户访问页面语言类
- php 获取Youtube某个User所有Video信息
- php 字符编码转换类，支持ANSI、Unicode、Unicode big endian、UTF-8、UTF-8+Bom 互相转换
- php 版本处理类
- TP5
- 验证器
- 内置规则
- tp5数据库操作
- 数据添加或更新
- 静态增删改查 / 关联操作
- 日志操作
- 路由
- taglib-自制标签
- migrations 数据库迁移
- TP3.2
- 数据库操作
- 发送邮箱
- Tp6
- Redis
- 字符串 / 列表 / Hash / Set / Zet / 基数统计算法
- 队列 /订阅发布 php实例
- 事务 / bitmap 位图 / 地理位置
- 备份与恢复 / 性能测试
- 设置密码 / 模糊查询
- 性能优化
- php+redis实现高并发模拟下单、秒杀、抢购操作
- Redis 的简单介绍
- Redis 最常见的问题
- 扩展thinkphp5的redis类方法
- php for redis
- 前言11
- 字符串11
- 集合
- 有序集合
- 列表
- 哈希
- key操作
- Redis 基础教程
- 简介
- 递增
- 过期
- 列表1
- 集合1
- 可排序集合
- 哈希表
- Redis学习文档
- 序言
- 简介1
- Window 下安装
- 执行
- Linux 下安装
- 数据类型1
- String
- Hash
- List
- Set
- zset
- 区别和详解
- 命令
- Keys
- flushall
- del
- ping
- 设置密码
- 实例
- PHP+Redis 实例【一】点赞 + 热度
- Thinkphp+Redis
- 数据队列
- 字符串111
- 列表11
- 集合11
- 哈希1
- 有序集合1
- 添加redis函数助手
- 基础知识
- Redis的7个应用场景
- 深入解析Redis中常见的应用场景
- MongoDB和Redis的区别
- 相关书籍
- 函数整理
- redis知识总结
- redis学习文档
- 常用命令
- 运维常用命令
- 通用操作相关命令
- 字符串相关命令
- 链表list相关命令
- 集合set相关命令
- 有序集合相关指令
- 哈希hash
- 事务
- 订阅和发布
- rdb快照持久化
- aof日志持久化
- redis集群 主从配置
- sentinel监视
- key的设计
- Redis实践技巧
- 前言111
- 第1章 keys键操作
- 第2章 string类型
- 第3章 list类型
- 第4章 set类型
- 第5章 sort set排序类型
- 第6章 hash类型
- 第7章 redis备份
- 第8章 主从复制
- 第9章 设置密码
- 第10章 事务
- 第11章 php操作redis
- Redis常见7种使用场景(PHP实战)
- redis
- jQuery学习总结
- jquery总结2
- Git
- php微信接口开发
- php微信接口开发（卷一）
- 开发心得
- 申请微信测试号
- 打通服务器与微信之间的通信
- 接受微信发送的信息
- 回复微信发送的信息
- 微信回复单图文消息
- 微信回复多图文消息
- curl用法小测试
- 获取access_token
- 获取微信的media_id
- 微信回复图片消息
- 关注自动回复
- 微信生成自定义菜单
- 【实战】后台管理自定义菜单
- 1.页面数据提交并展示
- 2.组装一、二级菜单
- 3.完成简略自定义菜单
- 【实战】thinkphp框架开发微信接口
- 1.相关东西下载地址
- 2.配置thinkphp3.2.3
- 3.微信回复文本消息
- 4.微信获取个人基本信息
- php微信接口开发（卷二）
- 网页授权获取用户基本信息
- 1.输出回调地址
- 2.获取用户信息页面
- 3.数据写入数据库
- 用户分组接口的使用
- 1.对上节代码的优化处理
- 2.获取所有用户组
- 3.创建一个分组
- 4.查询指定用户的分组
- 群发消息的接口的使用
- 1.创建新控制器
- 2.预览群发消息接口
- 3.群发消息
- 生成带参数的二维码
- 长连接转短连接
- 微信js-SDK的引入
- 1.获取jsapi_ticket
- 2.判断当前客户端版本是否支持指定JS接口
- 图像接口的使用
- 扫一扫二维码接口
- php微信接口开发（卷三）
- 微信公众号
- 1.前提条件
- 2.微信公众平台需要做的设置
- 微信支付商户平台
- 1.操作证书
- 2.配置密钥
- 3.配置支付授权目录
- 公众号支付（Jsapi支付）
- 1.SDK与demo下载
- 2.测试DEMO
- 3.将支付接口更为真实公众号信息
- 微信商城
- 1.tp3+bootstrap使用实战
- 2.图片上传实战
- 3.商城后台实战
- 4.购买商城实战
- 5.下订单后使用微信支付
- 小程序基础
- 简介12
- 接入指南
- 开发者工具的使用
- 代码审核与发布
- 小程序申请微信认证
- 小程序申请微信支付
- 小程序绑定微信开放平台帐号
- app.json配置
- 配置demo
- pages
- window
- tabBar
- networkTimeout
- debug
- page.json
- API
- 发起网络请求
- 网络请求提交表单
- 引入
- WeUI