文章目录
1 Ajax
1.1 介绍
1、AJAX( Asynchronous JavaScript and XML)异步的 JavaScript 和 XML
2、AJAX 不是新的编程语言，而是一种使用现有标准的新方法
3、AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
4、AJAX 可以使网页实现异步更新
5、AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
1.2 同步和异步的区别
1.2.1 同步
我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求， 在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码
1.2.2 异步
我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没有响应，客户端的其他代码一样可以运行
1.3 原理
1.4 Ajax示例
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
原生Ajax在现实生活中用到的已经很少了,所以我们主要了解Ajax是什么就可以了
2 JQuery Ajax
2.1 关于JQuery与Ajax
1、如果没有 jQuery，AJAX 编程还是有些难度的。
2、编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
3、jQuery 提供多个与 AJAX 有关的方法。
4、通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
2.2 JQuery的load方法
2.2.1 作用
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
2.2.2 语法
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$(selector).load(URL,data,callback);
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt");
});
});
</script>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本内容</h2></div>
<button>获取外部内容</button>
</body>
2.2.3 load()方法回调
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("URL",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
如果 load() 方法已成功，则提示"外部内容加载成功！"，而如果失败，则提示错误消息
2.3 JQuery的$.get() 方法
2.3.1 作用
$.get() 方法通过 HTTP GET 请求从服务器上请求数据,一般用于查询
2.3.2 语法
必需的 URL 参数规定您希望请求的 URL
可选的 callback 参数是请求成功后所执行的函数名
$("button").click(function(){
$.get("URL",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
})
2.4 JQuery的$.post方法
2.4.1 作用
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据,主要用于数据的增加和修改
2.4.2 语法
必需的 URL 参数规定您希望请求的 URL
可选的 data 参数规定连同请求发送的数据
可选的 callback 参数是请求成功后所执行的函数名
$("button").click(function(){
$.post("URL", { name:"codelx"}, function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
2.5 JQuery的$.ajax方法
2.5.1 作用
ajax() 方法用于执行 AJAX（异步 HTTP）请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法(包括get和post方法)。该方法通常用于其他方法不能完成的请求
2.5.2 语法
url:
要求为String类型的参数，（默认为当前页地址）发送请求的地址
type:
要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持
async:
要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行
data:
要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后
dataType:
要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递
complete：
要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串
success：
要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。
(1)由服务器返回，并根据dataType参数进行处理后的数据。
(2)描述状态的字符串。
error:
要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)
contentType：
要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"
3 JSON
3.1 概念
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解
3.2 示例
<h2>JavaScript 创建 JSON 对象</h2>
<p> 网站名称: <span id="jname"></span><br />
网站地址: <span id="jurl"></span><br />
网站 slogan: <span id="jslogan"></span><br />
</p> <script>
var JSONObject= {
"name":"codelx",
"url":"www.baidu.com",
"slogan":"!!!!！"
};
document.getElementById("jname").innerHTML=JSONObject.name
document.getElementById("jurl").innerHTML=JSONObject.url
document.getElementById("jslogan").innerHTML=JSONObject.slogan
3.3 语法
数据在名称/值对中、数据由逗号分隔、大括号保存对象、中括号保存数组。
名称/值对包括字段名称（在双引号中），后面写一个冒号，然后是值
"name" : "百度"
JSON 值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在中括号中）、对象（在大括号中）、null
3.3.1 数字
{ "age":30 }
3.3.2 对象
{ "name":"百度" ,
"url":"www.baidu.com" }
JSON 对象使用在大括号{}中书写。
对象可以包含多个 key/value（键/值）对。
key 必须是字符串，value 可以是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
key 和 value 中使用冒号:分割。
每个 key/value 对使用逗号,分割。
var myObj, x;
myObj = { "name":"runoob", "alexa":10000, "site":null };
你可以使用点号.来访问对象的值：
x = myObj.name;
你也可以使用中括号[]来访问对象的值：
Y = myObj["site"];
3.3.3 数组
{ "sites":
[
{ "name":"百度" , "url":"www.baidu.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
JSON 数组在中括号中书写。
JSON 中数组值必须是合法的 JSON 数据类型（字符串, 数字, 对象, 数组, 布尔值或 null）。
JavaScript 中，数组值可以是以上的 JSON 数据类型，也可以是 JavaScript 的表达式，包括函数，日期，及 undefined。
对象属性的值可以是一个数组：
我们可以使用索引值来访问数组：
{
"name":"网站",
"num":3,
"sites":[ "Google", "Runoob", "Taobao" ]
}
x = myObj.sites[0];
3.3.4 布尔值
{ "flag":true }
3.3.5 null
{ "runoob":null }
3.4 常用方法
3.4.1 JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
3.4.2 JSON.stringify()
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
3.5 JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。
同源策略，它是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
如客户想访问 :
https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
假设客户期望返回数据：[“customername1”,“customername2”]
真正返回到客户端的数据显示为: callbackFunction([“customername1”,“customername2”])
1227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
