一、什么是AJAX Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是,如果没有Ajax技术,改变网页的一小部分(哪怕是一行文字、一张图片)都需要重新加载一次整个页面,而有了Ajax之后,就可以实现在网页不跳转不刷新的情况下,在网页后台提交数据,部分更新页面内容。 二、AJAX的原声写法 1.XMLHttpRequest对象 XMLHttpRequest 对象用于在后台与服务器交换数据,能够在不重新加载页面的情况下更新网页,在页面已加载后从服务器请求数据,在页面已加载后从 var xmlhttp; : function loadXMLDoc(url) { xmlhttp = null; if (window.XMLHttpRequest){ //code for all new beowsers xmlhttp = new XMLHttpRequest();//here is creat XMLHttpRequest object } else if (window.ActiveXObject){ //code for IE5 and IE6 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp){ xmlhttp.open("GET",url,true); //request mode and request address xmlhttp.send(null); //send request xmlhttp.onreadystatechange = state_Change; //monitor callback fun } else { alert("Your browser dose not support XMLHTTP"); } } // statr_Change callback function function state_Change() { if(xmlhttp.readyState == 4&&xmlhttp.status == 200) { // to hide these two conditions is to express the succ of the request 4 = "loaded", 200 = OK var data = xmlhttp.responseText; } else { alert("Problem resrieving XML data"); } } 3.原声写法中的注意点 (3).关于status由服务器返回的HTTP状态代码,200 表示成功,404 表示 “Not Found”错误。当readyState小于 3 的 时候读取这一属性会导致一个异常。(后面有http状态码详细解读) Jquery中的AJAX $.ajax({ type:‘‘, // Request mode: get or post url:‘‘, //request url async:"", // Whether to support asynchronous refresh,default true data:"", // need submit data dataType:"", //the type if data retured bt the server success:function(data){ //the callback function after the request,data is by the sercer returned }, error:function(data){ //the callback function is error, } }) 四、GET or POST? 作为Ajax最常用的两种数据提交方式,GET和POST有着自己的特点和使用场景,正确区分GET和POST的不同根据实际需求进行选用在开发中十分重要,简单是关键!!! 关键点: 五、success和complete区别 六、XML -> JSON 七、jquery中封装的ajax方法使用 ajaxstar和ajaxstop <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="test/jquery.js"></script> </head> <body> <div class="trigger">trigger</div> <div class="result"></div> <div class="log1"></div> <div class="log2"></div> </body> <script type="text/javascript"> $(document).ready(function(){ //在此就不写注释了,字面上都是可以看懂的 嘻嘻 $(‘.log1‘).ajaxStart(function(){ $(this).text(‘start handler‘); }); $(‘.log2‘).ajaxStop(function(){ $(this).text("ajax stop"); }); $(‘.trigger‘).click(function(){ $(‘.result‘).load(‘xxxx.html‘) }) }) </script> </html> WEB前端学习交流群21 598399936 |
认识AJAX及函数使用
时间: 2024-08-08 09:44:00
认识AJAX及函数使用的相关文章
封装一个Ajax工具函数
/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type string 请求的方式 默认是get * 2. url string 请求地址 接口地址 * 3. async boolean 默认的是true * 4. data object {}请求数据 * * 5.success function 成功回调函数 * 6.error function 失败的回调函数 * */ $.ajax
jQuery Ajax 操作函数
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个 Ajax 事件. .ajaxError() 当 Ajax 请求完成且出现错误时注册要调用的处理程序.这是一个 Ajax 事件. .ajaxSend() 在 Ajax 请求发送之前显示
AJAX编程-封装ajax工具函数
即 Asynchronous [e's??kr?n?s] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器进行通信. XMLHttpRequest可以以异步方式的处理程序,浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 封装ajax工具函数 $.ajax = function(options){ if(!options) return fal
JavaScript封装Ajax工具函数及jQuery中的ajax
封装ajax工具函数 /** * ITCAST WEB * Created by zhousg on 2016/5/24. */ /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异步的还是同步的 async false true * 4. 请求内容的格式 contentType * 5. 传输的数据 data json对象 * * 6.响应成功处理函数 success function * 7.响应失败的处理函数 error function *
ajax回调函数中使用$(this)取不到对象的解决方法
如果在ajax的回调函数内使用$(this)的话,实践证明,是取不到任何对象的,需要的朋友可以参考下 $(".derek").each(function(){ $(this).click(function(){ var params = $(this).parent().serialize(); var obj=$(this).parent().siblings("div#caskContent"); var form=$(this).parent(); $.aja
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:true(默认情况),如: function ManageCommentText(text) { var result = text; $.ajax({ data: "get", url: &qu
转: jquery中ajax回调函数使用this
原文地址:jquery中ajax回调函数使用this 写ajax请求的时候success中代码老是不能正常执行,找了半天原因.代码如下 1 $.ajax({type: 'GET', 2 url: "/flag/", 3 data: dat, 4 success:function(){ 5 $(this).prevAll('p').css("text-decoration","line-through"); 6 } 7 }); 最后发现是ajax中
AJAX 回调函数刷新页面问题
AJAX 回调函数执行完成后,刷新页面window.location.reload()执行无效: 实现方式 1.获取当前页面链接 var route = window.location.href 2.执行完成后 通过replace重定向到当前页面 $.ajax({ url: 'XXX.php', type: 'post', data: { "action": 'XXX', }, success: function(data) { if (JSON.parse(data).success
ASP.NET MVC 4 (八) URL链接和Ajax帮助函数
使用帮助函数创建链接 MVC提供一些帮助函数创建链接,这些函数根据路径映射表自动调整生成的URL: 说明 示例 输出结果 应用程序相对URL Url.Content("~/Content/Site.css") /Content/Site.css 到控制器action的链接 Html.ActionLink("My Link", "Index", "Home") <a href="/">My Li