jQuery之AJAX总结

jQuery之AJAX总结

一.AJAX概念
Asynchronous Javascript And XML(异步javascript和XML)
AJAX并不是一种语言,而是一种创建交互网页应用的网页开发技术
AJAX是javascript、XHTML和CSS、DOM、XML和XSTL、XMLHttpRequest 等技术的组合
1.使用XHTML+CSS来标准化呈现;
2.使用XML和XSLT进行数据交换及相关操作;
3.使用XMLHttpRequest对象与Web服务器进行异步数据通信;
4.使用javascript操作Document Object Model(网络文档对象模型)进行动态显示及交互;
5.使用javascript绑定和处理所有数据
什么是 XML?
XML 指可扩展标记语言（EXtensible Markup Language）
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准
什么是 XSLT？
XSLT 指 XSL 转换（XSL Transformations）[1]
XSLT 是 XSL 中最重要的部分
XSLT 可将一种 XML 文档转换为另外一种 XML 文档
XSLT 使用 XPath 在 XML 文档中进行导航
XSLT 是一个 W3C 标准


AJAX核心对象是XMLHttpRequest


二.AJAX工作原理
用户操作流程：
用户浏览器->javascript实例化XmlHttpRequest对象->AJAX引擎->http请求->web服务器->后台业务系统
系统返回流程：
后台业务系统->后台服务器->web服务器->HTML,XML,JSON数据->AJAX引擎->HTML+CSS(Wel浏览器)->用户浏览器


三.AJAX优缺点:
AJAX异步处理优点:
减轻服务器的负担,AJAX一般只从服务器获取只需要的数据
无刷新页面更新,减少用户等待的时间
更好的客户体验,可以将一些服务器的工作转移到客户端来完成,节约网络资源,提高用户体验
无平台限制
促进显示与数据想分离
AJAX异步处理的缺点:
页面中存在大量JS,给搜索引擎带来困难
AJAX干掉了Back和History功能,即对浏览器机制的破坏
存在跨域问题
只能传输及接收utf-8编码数据


1.AJAX实现步骤


window.open(URL,name,features,replace)
URL:一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数
或者它的值是空字符串，那么新窗口就不会显示任何文档
name:一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，
该字符声明了新窗口的名称。这个名称可以用作标记 和

的属性 target 的值。
如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，
而只是返回对指定窗口的引用。在这种情况下，features 将被忽略
features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，
新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明
replace:
一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，
还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目


send()send()用于向一个已经连接的socket发送数据，如果无错误，返回值为所发送数据的总数，
否则返回SOCKET_ERROR。[1] send也是一个英文单词。


responseText属性：
服务器进程返回数据的文本版本
服务器进程返回数据的兼容DOM的XML文档对象 status 服务器返回的状态码, 如:404 = "文件末找到".
你向ajax后台的程序发送xmlhttp请求的时候, 后台程序接到请求会进 行处理,处理结束后,可以返回一串数据给前台,
这个就是responseText.
一般在后台程序C#中是Response.Write("字符串") php中使用的是echo...就是一个输出字符串
因为要输出一个字符串但有时候得到的是一个数组，但是要把他串行化，用PHP中的json技术把这个数组转换成
一个字符串输出给前端，而前端respText属性能接收住这个字符串，然后通过JS中的json技术把这个字符串
再次转换成JS认识的对象来进行操作(json数据传输类型基本上哪种语言都认识可以用于各种语言的传输与转换)


初始化XMLHttpRequest对象
if (window.XMLHttpRequest) {// Mozilla, Safari, ...
var http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 5 ,6
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest发出HTTP请求
http_request.open("GET|POST","test.php?GET方式传值",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //仅POST请求时需要设置
//用于向一个已经连接的socket发送数据
//如果是POST传输方式要把值写在send()函数里
http_request.send(向一个已连接的套接口发送数据);
XMLHttpRequest取得响应数据并显示
http_request.onreadystatechange=function(){
if(http_request.readyState==4 && http_request.status==200){
$("p").text(http_request.responseText)
}
}
例:
//GET方式
参数1：代表是以get还是post方式发送请求 参数2：发送请求给哪个url 参数3：true代表异步请求，false代表同步请求
http_request.open("GET","test.php?user_name="+username.val(),true);
http_request.send();


发送POST请求
var username=$("input[name='user_name']");
参数1：代表是以get还是post方式发送请求 参数2：发送请求给哪个url 参数3：true代表异步请求，false代表同步请求
http_request.open("POST","test.php",true);
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
如果是POST传输方式要把值写在send()函数里
http_request.send({username:username});


四.JSON
javascript Object Notation,是一种轻量级的数据交换格式
JSON每种语言都认识他所以用他进行各种语言的数据的转换
JSON支持多种语言
格式
{key:value,key:value,.....} 对象格式
[{key:value,key:value,.....},{key:value,key:value,.....},......] 数组格式
PHP处理：
$json=json_encode($array) //对变量进行Json编码
$array=json_decode($json) //对Json数据进行解码转换成PHP变量
javascript处理：
eval('('+json+')') //将某个字符串按照JS代码来执行
例：
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))


JSON.parse(json) //对传过来的json字符串进行解码，变成JS认识的对象
JSON.stringify(obj) //将JS中的值编译成json字符串


五.jQuery中AJAX应用1
.不要忘写
$.ajax({
//你要传的php文件的路径
url:"test1.php", ('服务器url地址')
//以get方式传输拼接字符串
data:"user_name="+$('input[name="user_name"]').val(),('名=值&名=值&.....',)
//以什么方式传输
type:'get',('post|get')
//传输返回的数据类型
dataType:'json', ('xml|html|text|json|script')
//展示 数据的方式
success:function(res){
$('h1').text('用户名为：'+res.user_name);
},
//错误信息
error:function(xhr){
},
timeout:2000,
async:true,
cache:false
})


六.jQuery中AJAX应用2
$.get()
$.get('服务器url地址'，"json格式或字符串格式"，function(res){
//处理返回的数据
}), "xml|html|json|text|script")
例：
//'服务器url地址'，"json格式或字符串格式"
$.get("test1.php",{user_name:$("input[name='user_name']").val()},function(data){
//如果后台发过来的值跟这里的值相等让他执行下面代码
if(data.status=='ok'){
alert("登陆成功");
location.href="https://www.wl.com";
}else{
alert("登陆失败");
}
//"xml|html|json|text|script"类型
},'json')


七.jQuery中AJAX应用3
serialize() 序列表表格内容为字符串，用于 Ajax 请求
$.post()
$.post('服务器url地址'，"json格式或字符串格式"，function(res){
//处理返回的数据
}), "xml|html|json|text|script")
例：
//'服务器url地址'，"json格式或字符串格式" 用post方式提交要用form表单包起来
// 然后用serialize()来拿里面所有有值
$.post("test1.php",$('form').serialize(),function(res){
//如果后台发过来的值跟这里的值相等让他执行下面代码
if(res.status=='ok'){
alert("登陆成功");
location.href="https://www.wl.com";
}else{
alert("登陆失败");
}
//"xml|html|json|text|script"类型
},'json')


php中接收处理输出
try{
$pdo=new PDO("mysql:host=127.0.0.1;port=3306;dbname=数据库名",'数据库账号','数据库密码');
$pdo->exec("set names utf8");
$sen=$pdo->query("select * from yh_admin where user_name='{$user_name}' limit 1");
if($sen->rowCount()>0){
// $arr=$sen->fetch(PDO::FETCH_ASSOC);
//echo json_encode($arr);
//echo 'yes';
$arr['status']='ok';
}else{
echo 'no';
}
//切记用json数据类型传输
echo json_encode($arr);
}catch (PDOException $e){
echo $e->getMessage();
}