当前位置: 首页 > Web前端 > HTML

Ajax基本原理及使用教程(来自powernode)

时间:2023-03-28 11:16:34 HTML

首先,我们先来回顾一下什么是ajax?Ajax=异步JavaScript和XML。Ajax是一种用于创建快速动态网页的技术。Ajax通过在后台与服务器交换少量数据,使网页能够异步更新。这意味着可以在不重新加载整个网页的情况下更新网页的部分内容。如果传统网页(不使用Ajax)需要更新内容,则必须重新加载整个网页。前面提到ajax是什么,它的要点就是异步提交。你知道同步提交和异步提交的区别吗?同步提交:当用户发送请求时,当前页面不能使用,服务器将页面响应给客户端,响应完成后用户才能使用该页面。异步提交:当用户发出请求后,当前页面可以继续使用。当异步请求的数据响应到页面时,页面显示数据。Ajax工作原理客户端发送请求,请求交给xhr,xhr提交请求给服务,服务端进行业务处理,服务端响应数据给xhr对象,xhr对象接收数据,javascript将数据写入页面,如下图所示显示:Ajax请求的五步://第一步,创建XMLHttpRequest对象varxmlHttp=newXMLHttpRequest();functionCommentAll(){//第二步,注册回调函数xmlHttp.onreadystatechange=callback1;//{//if(xmlHttp.readyState==4)//if(xmlHttp.status==200){//varresponseText=xmlHttp.responseText;//}//}//第三步,配置请求信息,open(),get//获取请求参数在url后面,.ashx?methodName=GetAllComment&str1=str1&str2=str2xmlHttp.open("post","/ashx/myzhuye/Detail.ashx?methodName=GetAllComment",true);//post请求需要配置请求头信息//xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//第四步发送请求,post请求,要传递的参数放在这里xmlHttp.send("methodName=GetAllComment&str1=str1&str2=str2");//"}//第五步,创建回调functionfunctioncallback1(){if(xmlHttp.readyState==4)if(xmlHttp.status==200){//获取返回数据vardata=xmlHttp.responseText;//json字符串转json格式data=eval(data);$.each(数据,函数(i,v){警报(v);});}}//后台方法publicvoidGetAllComment(HttpContextcontext){//Params可以获取get和post方法传递的值stringmethodName=context.Request.Params["methodName"];//QueryString只能获取get方法传过来的值。stringstr1=context.Request.Form["str1"];//从httpRequest获取值,包括get和post方法stringstr2=context.Request["str2"];列表评论=newList();评论。添加(方法名称);评论。添加(str1);评论。添加(str2);//ajax接受json类型,需要将返回的数据转为json格式stringcommentsJson=newJavaScriptSerializer().Serialize(comments);context.Response.Write(commentsJson);}创建一个xmlHttpRequest对象并设置回调函数。使用open方法与服务器建立连接,向服务器发送数据。在回调函数中,AJAX可用于处理不同的响应状态。接下来我就给大家介绍一下。AJAX需要掌握的几个功能点:1.创建原生Ajax对象XMLHttpRequest是AJAX的基础。所有现代浏览器(IE7+、Firefox、Chrome、Safari和Opera)都有内置的XMLHttpRequest对象。然后让我们创建一个ajax对象constinstance=newXMLHttpRequest();所以我们创建一个用于ajax交互的对象。当然这里要提一下,ie5、ie6老版本的javascript对象是用ActiveX标准实现的,所以没有XMLHttpRequest对象。他们使用此方法创建一个对象constinstance=newActiveXObject("Microsoft.XMLHTTP");其实我们只需要了解它,你不需要把这块加到你的代码中。现在所有的网站都应该放弃低版本的ie支持了,这个已经退出历史舞台了,了解情况就好了。2.Ajax发送请求首先我们看XMLHttpRequest是如何向服务器发送请求的constinstance=newXMLHttpRequest();instance.open(方法,url,异步);实例.发送();这里用到两个方法,第一个open方法其实就是配置ajax的必要信息,第二个send才是真正向服务器请求。3、Ajax通过readyState状态的变化接收服务器响应。当请求发送到服务器时,我们需要执行一些基于响应的任务。每当readyState发生变化时,都会触发onreadystatechange事件,readyState属性中存放着XMLHttpRequest的状态信息。4、跨域请求升级跨域是所有前端都必须面对的棘手问题。当您从其他服务器请求资源时,浏览器安全限制将阻止该请求。你的请求不会去到服务器,会被浏览器拦截,同样遵循同源策略。那么如何解决这个跨域,一般有几种方法,但是核心是需要服务端配合跨域,而前端本身是无法处理跨域的。第一个使用JsonP方法。这种方式其实需要后台配合处理。后台会发出请求,然后将数据组装成一个json对象返回给前台,然后前台通过回调函数进行操作。这也比较麻烦。二是在服务器端放一个跨域文件crossdomain.xml,然后写一个可以跨域的ip地址。三是配置反向代理服务器。通过代理服务器,我们其实就是代理服务器去请求外设,然后转发给我们的服务器。这也可以防止跨域。以上就是AJAX知识的总结。最后推荐大家看ajax的视频来学习。新手更容易理解和吸收。力节点Ajax学习教程,通过ajax的传统使用,结合json操作的方式,结合跨域等高级技术方式,对ajax进行了全面的讲解。Ajax资料下载:http://www.bjpowernode.com/?s...