1.简介
Ajax = 异步 JavaScript 和 XML 或者是 HTML(标准通用标记语言的子集)。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
2 AJAX核心编程思路
//1.获取用户名
var username=$(this).val();
//2.创建xhr
var xhr;
if(window.XMLHttpRequest){//非IE
xhr=new XMLHttpRequest();
}else{//IE浏览器
xhr=new ActiveXObject("microsoft.XMLHTTP");
}
//3.发送请求传递参数
xhr.open("GET|POST","(url?name="+username);
xhr.send();
//4.处理响应并刷新页面局部
xhr.onreadystatechange=function () {
/*
xhr.readyState 0 xhr 未初始化
1 xhr 已经初始化
2 xhr 发送请求
3 xhr 请求开始响应
4 请求完整响应
xhr.status 的不同状态
[参考这个链接](https://www.cnblogs.com/liu-fei-fei/p/5618782.html)
*/
//处理完整且正确的响应
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
}
}
3 AjAX的GET方式编程思路
//1.获取用户名
var username=$(this).val();
//2.创建xhr
var xhr;
if(window.XMLHttpRequest){//非IE
xhr=new XMLHttpRequest();
}else{//IE浏览器
xhr=new ActiveXObject("microsoft.XMLHTTP");
}
//3.发送请求传递参数
xhr.open("GET","{url?name="+username);
xhr.send();
//4.处理响应并刷新页面局部
xhr.onreadystatechange=function () {
//处理完整且正确的响应
if(xhr.readyState==4&&xhr.status==200){
xhr.responseText;
}
}
3.AJAX的POST请求方式
//1.获取用户名
var username = $(this).val();
//2.创建xhr
var xhr ;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//3.发送post方式请求并传递参数
xhr.open("POST","url");
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //设置响应头
xhr.send("name="+username); //传递参数
//4.处理响应 并刷新页面局部
xhr.onreadystatechange = function () {
if(xhr.readyState==4 && xhr.status==200){
console.log(xhr.responseText);
}
}
4.JSON协议串
5 AJAX的封装
AJAX在创建对象,发送请求等方面存在着大量的冗余,因此对其进行封装
5.1 GET 方式的封装
//get方式请求
function get(url,param,callback){
//1.创建xhr
var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("microsoft.XMLHTTP");
}
//2.发送请求并传递参数
xhr.open("GET",url+"?"+param);
xhr.send();
//3.处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
callback(responseText);
}
}
}
5.2 POST 方式的封装
function post(url,param,callback){
//1.创建xhr
var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("microsoft.XMLHTTP");
}
//2.发送请求并传递参数
xhr.open("POST",url);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(param);
//3.处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
callback(responseText);
}
}
}
//3.处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
callback(responseText);
}
}
}
5.3 综合方式
function ajax(type,url,param,callback){
//1.创建xhr
var xhr;
if(XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("microsoft.XMLHTTP");
}
//2.发送请求并传递参数
if(type == "GET" || type == "get"){
xhr.open("GET",url+"?"+param);
xhr.send();
}else{
xhr.open("POST",url);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send(param);
}
//3.处理响应
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var responseText = xhr.responseText;
callback(responseText);
}
}
}
6.jQuery对ajax的封装
1.页面中引入对应jQuery的核心js文件
2, 发送ajax请求
1). $.ajax({
type:"GET|POST",请求方式
url:"", 请求的url路径
data:"name=zhangsan&password=123456"|(name:"zhangsan",password:"123456"),
dataType:"JSON",//预期服务器响应类型
success:function(result){
result==xhr.responseText;
}
});
注意:
1.当后台响应json格式数据时如果指定了响应类型为application/json时,jquery封装的ajax会自动转为js对象或数组
2.如果在前台发送ajax请求时明确指定dataType属性为JSON时,即使后台不设置响应类型结果也会自动转为js对象或数组
3.推荐前台设置响应类型,服务器端统一设置相应类型,结果一定为js对象或数组
2). $.get(url,data,function(result),type); //发送请求传递参数处理响应并执行相应的数据类型
$.get(url); //发送get方式请求,不传递参数,不处理响应
$.get(url,function(result){}); //发送GET方式请求,不传递参数,处理响应
$.getJSON(url,data,function(result){});
$.getJSON(url,data,function(result){},type);