Ajax：Ajax百度百科含义链接:
1.数据的传递
2.是一种无刷新加载页面的技术，更新部分网页。
缺点：可能会对于后退功能失效，无法回到上一页面的状态。
Ajax须知：JSON 和 xml
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
1.具有严谨的写法
2.键值对表示（类似map中的键值对）
{ "name": "中国", "province": [{ "name": "黑龙江", "cities": { "city": ["哈尔滨", "大庆"] } }, { "name": "广东", "cities": { "city": ["广州", "深圳", "珠海"] } }, { "name": "台湾", "cities": { "city": ["台北", "高雄"] } }, { "name": "新疆", "cities": { "city": ["乌鲁木齐"] } }] }
JSON传输优于xml传输，相同条件下 （下同xml结构）JSON传输更快更轻便
xml version="1.0" encoding="utf-8"?>
<country>
<name>中国name>
<province>
<name>黑龙江name>
<cities>
<city>哈尔滨city>
<city>大庆city>
cities>
province>
<province>
<name>广东name>
<cities>
<city>广州city>
<city>深圳city>
<city>珠海city>
cities>
province>
<province>
<name>台湾name>
<cities>
<city>台北city>
<city>高雄city>
cities>
province>
<province>
<name>新疆name>
<cities>
<city>乌鲁木齐city>
cities>
province>
country>
Ajax - JSON （javascript）
丶使用冒号赋值
丶每条语句后以逗号结尾
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONtitle>
<script>
var jsondate = {
"name":"小明",
"city":{"address":"北京"},
"hobbies":{"movie":"蜘蛛侠","play":"computer"},
"al":function () {
alert("java")
}
//使用冒号赋值
// 每条语句后以逗号结尾
}
alert(jsondate.name)
alert(jsondate.city.address)
alert(jsondate.hobbies.movie)
alert(jsondate.al())
script>
head>
<body>
body>
html>
Ajax 与 jquery
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
Jquery使用方法与基本使用这里不详细说明。
注意：本例一以下内容都以jquery为写。
Ajax
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
优点：在变动大规模页面下 只用更新一小部分和维护数据。
缺点：用户在后退时不能够保存页面的状态，后退和收藏功能会失效。（浏览器不记录动态数据，只记录静态页面）
Ajax的无刷新
传统加载页面方法
点击后观察地址变化
不使用ajax技术加载页面会改变当前页面的url。使用了ajax加载方式如下：
点击之后观察地址变化
局部进行刷新加载页面。
使用代码如下；
jquery 的load()方法 加载页面（同上例子ajax所用代码）
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
ajax.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajaxtitle>
<script type="text/javascript" src="jquery-3.3.1.js">script>
<script>
$(document).ready(function () {
$("a").click(function () {
var url = this.href;
var args = {"time":new Date()}
$("#div").load(url,args); //加载事件
return false;
})
$("#div").css({"border":"solid red","width":"100px","height":"200px "});
})
script>
head>
<body>
<a href="ajax.txt">clicka>
<div id="div">div>
body>
html>
ajax.txt
Ajax get() post() getJSON()
get() 与post（）请求都是请求从服务器上请求数据。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get.post.title>
<script type="text/javascript" src="jquery-3.3.1.js">script>
<script>
$(document).ready(function () {
$("#a").click(function () {
$.get("JSON.txt",function (data,status) {
$.post("JSON.txt",function (data,status) {
alert("数据:"+data +"状态:"+ status);
})
})
})
script>
head> <body> <a id="a">点击a> body> html>