Ajax在jQuery中应用--jQuery基础知识点(5)
2014-11-30 23:31
821 查看
Ajax(Asynchronous JavaScript and XML),其核心是通过XMLHttpRequest对象,以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而完成人机交互的数据操作。Ajax技术并不局限于Web动态页面,在普通的静态HTML页面中同样可以实现!
1. 传统的JavaScript方法实现Ajax功能var objXmlHttp = null; //声明一个空的XMLHTTP变量 function CreateXMLHTTP() { //根据浏览器的不同,返回该变量的实体对象 if (window.ActiveXObject) { objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else { if (window.XMLHttpRequest) { objXmlHttp = new XMLHttpRequest(); } else { alert("初始化XMLHTTP错误!"); } } } function GetSendData() { document.getElementById("divTip").innerHTML = "<img alt='' title='正在加载中...' src='Images/Loading.gif' />"; //初始化内容 var strSendUrl = "b.html?date="+Date(); //设置发送地址变量并赋初始值 CreateXMLHTTP(); //实例化XMLHttpRequest对象 objXmlHttp.open("GET", strSendUrl, true); //open方法初始化XMLHttpRequest objXmlHttp.onreadystatechange = function() { //回调事件函数 if (objXmlHttp.readyState == 4) { //如果请求完成加载 if (objXmlHttp.status == 200) { //如果响应已成功 //显示获取的数据 document.getElementById("divTip").innerHTML = objXmlHttp.responseText; } } } objXmlHttp.send(null); //send发送设置的请求 }2. load(url,[data],[callback])方法实现Ajax功能
load()方法可以很快地加载数据到页面中,但如需对获取的数据进行处理,必须在先插入页面中,然后才能进行,执行效率较低。
例:$("#divTip").load("b.html"); //load()方法加载数据
3. getJSON(url,[data],[callback])函数获取数据
采用将要获取的数据集另存为一种轻量级的数据交换格式,即JSON文件格式
<span style="white-space:pre"></span>$.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $.each(data, function(InfoIndex, Info) { //遍历获取的数据 strHTML += "姓名:" + Info["name"] + "<br>"; strHTML += "性别:" + Info["sex"] + "<br>"; strHTML += "邮箱:" + Info["email"] + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 })
4. getScript(url,[data],[callback])函数获取JS文件内容
<script type="text/javascript" src="js/*.js"><scirpt> //传统方式
$("<script type="text/javascript" src="js/*.js" />").appendTo("head"); //传统方式
例:$.getScript("UserInfo.js");//打开已获取返回数据的文件
5. get(url,[data],[callback],[type])实现异步获取xml文档数据
[type]:表示返回数据的格式,如HTML、XML、JS、JSON、TEXT等
$.get("UserInfo.xml", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $(data).find("User").each(function() { //遍历获取的数据 var $strUser = $(this); strHTML += "姓名:" + $strUser.find("name").text() + "<br>"; strHTML += "性别:" + $strUser.find("sex").text() + "<br>"; strHTML += "邮箱:" + $strUser.find("email").text() + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 })6. $.get发送请求
$.get("UserInfo.aspx",{ name: encodeURI($("#txtName").val()) },function(data) { $("#divTip").empty() //先清空标记中的内容 <span style="white-space:pre"> </span>.html(data); //显示服务器返回的数据 })7. $.post发送请求
$.post("User_Info.aspx",{ name: encodeURI($("#txtName").val()), <span style="white-space:pre"> </span> sex: encodeURI($("#selSex").val()) },function(data) { $("#divTip").empty() //先清空标记中的内容 <span style="white-space:pre"> </span>.html(data); //显示服务器返回的数据 })8. GET方式不适合传递数据量较大的数据
GET方式请求的历史信息会在浏览器的缓存中,有一定的安全风险
9. serialize()序列化表单,简化参数传值的方式
将所有选择的DOM元素转换成能随Ajax传递的字符串,即序列化所选择的DOM元素!
例:$("#frmUserInfo").serialize(), //序列化表单数据
不足:如表单中有多选项被选中时,该方法只能传递一项的值
10. $.ajax([options])方法发送请求,$.ajax() 是最低层方法,功能最强大
$(function() { <span style="white-space:pre"> </span>$.ajax({ //请求登录页 url: "login.html", //登录静态页 dataType: "html", success: function(HTML) { //返回页面内容 $("#frmUserLogin").html(HTML); //将页面内容置入表单 $("#btnLogin").click(function() { //“登录”按钮单击事件 //获取用户名称 var strTxtName = encodeURI($("#txtName").val()); //获取输入密码 var strTxtPass = encodeURI($("#txtPass").val()); //开始发送数据 $.ajax({ //请求登录处理页 url: "login.aspx", //登录处理页 dataType: "html", //传送请求数据 data: { txtName: strTxtName, txtPass: strTxtPass }, success: function(strValue) { //登录成功后返回的数据 //根据返回值进行状态显示 if (strValue == "True") { $(".clsShow").html("操作提示,登录成功!"); } else { $("#divError").show().html("用户名或密码错误!"); } } }) }) } }) })11. $.ajaxSetup([options])方法全局设置Ajax,一次设置,全局有效
$.ajaxSetup({ //设置全局性的Ajax选项 type: "GET", url: "UserInfo.xml", dataType: "xml" }) $("#Button1").click(function() { //"姓名”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "姓名", "name"); //显示"姓名"部分 } }) }) $("#Button2").click(function() { //"性别”按钮的单击事件 $.ajax({ success: function(data) { //传回请求响应的数据 ShowData(data, "性别", "sex"); //显示"性别"部分 } }) })12. Ajax中的全局事件
ajaxStart和ajaxStop这两个全局事件的使用频率非常高。前者是当请求开始执行时触发,往往用于编写一些准备性的工作,如提示“正在获取数据...”字样;后者是当请求结束时触发,在这一事件中,常常与前者配合,说明请求的最后进展状态,如将显示中的“正在获取数据...”字样修改为“成功获取数据...”字样,然后渐渐消失。
//元素绑定全局ajaxStart事件 $("#divMsg").ajaxStart(function() { $(this).show(); //显示元素 }) //元素绑定全局ajaxStop事件 $("#divMsg").ajaxStop(function() { $(this).html("已成功获取数据。").hide(); })
相关文章推荐
- Ajax在jQuery中应用--jQuery基础知识点(5)
- jquery 基础-Ajax应用
- 三、jQuery--jQuery基础--jQuery基础课程--第8章 jQuery 实现Ajax应用
- 基础知识之JQUERY-AJAX
- web基础知识(二)关于ajax,Jquery传值最基础东西
- 基础知识之JQUERY中$ajax()方法参数详解
- JQuery 之 Ajax 开发基础知识
- web基础知识(三)关于ajax,Jquery传值最基础东西
- jQuery/Json/Ajax基础知识
- JQuery+AJAX异步刷新的一个基础应用(检验用户名是否已存在)
- AJAX实现一个简单的相册和里头包含一些DOM基础应用
- jquery应用-AJAX推拽分页
- jQuery基础知识
- AjaxPro基础知识 and FAQ
- jQuery应用(二)--jQuery让Ajax变得异常简单
- (转)jquery基础教程七 选择器(selectors 的xpath语法应用)
- jquery基础教程 选择器(selectors 的xpath语法应用)
- jQuery与Ajax的应用[转]
- jquery $.ajax入门应用二
- JQuery使用Ajax的一个简单应用