Ajax
概念解析
- 英文名：Asynchronous Javascript And XML
- 中文名：阿（ei）贾（zhai）克斯
- 解释：异步的js和xml，用于创建动态网页技术。而且不用加载整个页面的情况，只更新部分网页，主要应用类型：评论，用户评论提交后，因为需要更新内容，必然加载整个网页，假如当正在观赏视频时候，重新加载页面，video会重新从0开始播放，这就很难受，而ajax的出现正是解决了这个难题。
- Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
- 使用 JavaScript向服务器提出请求并处理响应而不阻塞用户！核心对象是XMLHTTPRequest。通过这个对象，JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
- Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
使用方式
1.需要创建一个XMLHttpRequest对象，
//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
var xhr = new XMLHttpRequest();
//老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
- 监听变化
- 使用onreadystatechange 事件。
- onreadystatechange：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
- readyState(请求状态码):
- 0:请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4:请求已完成，且响应已就绪
- status(状态): 200: “OK” ,404: 未找到页面
- 使用onreadystatechange 事件。
正规做法
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
document.getElementById("xxx").innerHTML=xmlhttp.responseText;
}
}
另一种：
//当完成请求时也就是xmlhttp.readyState==4 && xmlhttp.status==200。
// 响应返回会触发 onload事件，执行事件对应的函数
xhr.onload = function () {
var v = xmlhttp.responseText;
};
使用onload事件就无需判定状态以及状态码了
-
响应格式
- 从后台返回的响应数据如何接收
- responseText：获得字符串形式的响应数据。
- responseXML：获得 XML 形式的响应数据。
- 从后台返回的响应数据如何接收
-
发送请求
- open方法里参数有三个：
- (get|post)，请求方式。
- get请求只有请求行和请求头 ，经常使用来查询信息。
- post请求包含请求行、请求头、请求体，常被使用来修改后台数据
- 请求地址url：任何类型文件。
- 异步开启：使用异步为true，否则为false。
get请求：
xhr.open("get", 请求地址, true|false); // 发请求前准备
xhr.send(); // 真正发送请求
post请求：
xhr.open("post", "/carrots-admin-ajax/a/login",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&pwd=" + code); //参数
两段代码理解一下
function post(url, param, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() { // 当 onload 事件发生时，才会执行 c 函数
callback(xhr); // 调用 c 函数
};
xhr.open("post", url, true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(param);
}
function get(url, param, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() { // 当 onload 事件发生时，才会执行 c 函数
callback(xhr); // 调用 c 函数
};
xhr.open("get", url+"?"+param, true);
xhr.send();
}
其他知识
- 一个完整的Http请求过程
- 域名解析
- tcp三次握手
- 客户端发送http请求
- 服务器响应发送响应数据
- 客户端得到数据
- 呈现界面
- 断开连接
- http的四个组成部分
- http请求的方法或者动作(post|get)
- 请求地址 URL
- 请求头
- 请求体
响应格式的第一种： responseTex
- 这里返回响应的虽然是字符串，但是更常用的是使用JSON作为服务器与AJAX的数据传输(主要是响应返回的数据)。
JSON
概念解析
- JavaScript Object Notation(JavaScript 对象表示法)，一种存储和交换文本信息的语法。JSON 比 XML 更小、更快，更易解析。
特点
- JSON 是轻量级的文本数据交换格式
- JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
- JSON 具有自我描述性，更易理解
转换
var js对象 = JSON.parse(json字符串);
var json字符串 = JSON.stringify(js对象);
为什么使用 JSON？
- JSON正逐渐代替XML成为首选的数据交换格式，这是因为JSON容易阅读并且它的结构匹配常见的编程概念，诸如对象和数组。JSON也比XML更高效（即更快的解析和网络传输），这是因为JSON更紧凑——没有开始和结束标签。
数据结构，语法规则以及支持的数据类型
- 数据结构
- 键/值对。
- 对象。
- 数组。
- 语法规则
- 数据在名称/值对中
- 数据由逗号分隔
- 大括号保存对象
- 中括号保存数组
- 数据类型
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在中括号中）
- 对象（在大括号中）
- null
例如
var v =
{
"name"："Xxx", //key只能是string value可以是任意的json支持的数据类型
"age":20,
"boolean":true
"sites": [ //sites数组里面存储的对象
{ "name":"教程" , "url":"www.zzz.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
访问json的值
- “.”语法：访问对象的属性的值
v.name = "Xxx"
-[]访问数组的值
v.sites[0] //得到数组的第一个对象
练习：类似于一个选择自己省市县地址的下拉列表
<%--
Created by IntelliJ IDEA.
User: Administrator
Date: 2019/1/20
Time: 10:18
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>省市区选择练习</title>
</head>
<body>
省 <select id = "sheng" onchange="findShi()"></select>
市 <select id = "shi" onchange="findXian()"></select>
县 <select id = "xian" ></select>
<script>
function findXian() { //第三步 找县
// 获取市当前选中的 option 的 value
var parentId = document.getElementById("shi").value;
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var json = xhr.responseText;
var list = JSON.parse(json);
// 添加之前要清除下拉列表的内容
document.getElementById("xian").innerHTML = "";
// 添加新内容
for(var i = 0 ; i < list.length; i++) {
var region = list[i];
// js 生成标签
var option = document.createElement("option"); // <option></option>
option.value = region.regionId; // <option value="2"></option>
option.innerText = region.regionName; // <option value="2">北京</option>
// 把它添加给 县 这个父元素
document.getElementById("xian").appendChild(option);
}
};
xhr.open("get", "/region?parentId=" + parentId, true);
xhr.send();
}
function findShi() { //第二步 找市
// 获取省当前选中的 option 的 value
var parentId = document.getElementById("sheng").value;
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var json = xhr.responseText;
var list = JSON.parse(json);
// 添加之前要清除下拉列表的内容
document.getElementById("shi").innerHTML = "";
// 添加新内容
for(var i = 0 ; i < list.length; i++) {
var region = list[i];
// js 生成标签
var option = document.createElement("option"); // <option></option>
option.value = region.regionId; // <option value="2"></option>
option.innerText = region.regionName; // <option value="2">北京</option>
// 把它添加给 市 这个父元素
document.getElementById("shi").appendChild(option);
}
// 联动
findXian();
};
xhr.open("get", "/region?parentId=" + parentId, true);
xhr.send();
}
function findsheng() { 第一步 //找省
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var region = xhr.responseText;
var list = JSON.parse(region);
for (var i = 0; i < list.length; i++) {
var region = list[i];
//js生成标签
var option = document.createElement("option"); // <option></option>
option.value = region.regionId; // <option value="2"></option>
option.innerText = region.regionName;// <option value="2">北京</option>
// 把它添加给 省 这个父元素
document.getElementById("sheng").appendChild(option);
}
// 联动
findShi();
};
xhr.open("get","/region?parentId=1",true);
xhr.send();
}
findsheng();
</script>
</body>
</html>
后台服务器代码就是一个连接数据库，使用JDBC查询一个数据库的表；查询到的结果是一个list集合，以json作为数据的传送方式。
扫一扫
1091
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
