ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ajax

2021-10-30 10:33:08  阅读:178  来源: 互联网

标签:异步 xmlhttp 请求 ajax xmlHttpRequest 服务端 客户端


什么是Ajax?

异步的javascript和xml,要以实现网页的无刷新的更新。

Ajax特点

在Web上通过Javascript,使用XmlHttpRequest异步的请求,实现无刷新的Web界面

Ajax的请求流程

1.来自客户端的异步请求,通过ajax enginee发送请求到服务端
2.服务端接收到请求,并处理请求,在服务端处理请求的过程中,客户端可以继续用户的活动
3.服务端处理完之后,会将需要的数据以xml或其它格式的数据发送到客户端
4.客户端获取到服务端发回的数据后,可以进行客户端的数据渲染操作。

与传统Web开发的比较

image

使用原生态的js实现ajax

1.在客户端确定请求的时机(即监听客户端的事件)
2.创建xmlHttpRequest请求对象(ajax enginee中的核心对象,现在主流浏览器都内置了该对象)
3.通过xmlHttpRequest对象调用Open()方法设置参数,第一个参数是请求的方式,第二个请求的服务端URL,第三个参数表示是否是异步,true是异步,false是同步
4.通过xmlHttpRequest对象调用Send()方法发送请求
5.监听xmlHttpRequest对象的onreadychanged事件,在事件处理程序中判断xmlHttpRequest.readystate4,xmlHttpRequest.status200,通过xmlHttpRequest.responseText属性获得服务端发回的文本。

比如:

//创建xmlhttprequest异步请求对象
                var xmlhttp;
                try
                {
                    xmlhttp=new XMLHttpRequest();//IE7+,firefox,Chrome,Safari,Opera
                }
                catch(Error)
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE7-
                }

                //组装请求的服务端路径
                var path = "WebForm2.aspx?username=" + userName + "&pwd=" + pwd;
                //4.参数设置
                //第一个参数:请求的方式 ,可以是get或post
                //第二个参数:请求的服务器端路径
                //第三个参数:是否是异步请求,true:异步请求,false:同步请求
                xmlhttp.open("get", path, true);

                //通过xmlhttprequest向服务端发送请求
                xmlhttp.send();


                //服务端什么时候处理好,客户端并不知道,所以要去监听xmlhttprequest的onreadystatechange的事件
                xmlhttp.onreadystatechange = function () {

                    if (xmlhttp.readyState == 4 && xmlhttp.status==200) {
                        var result=xmlhttp.responseText;//responseText:获得服务端返回给客户端的文本
                        if (result == "1")
                            window.location.href = "main.aspx";
                        else if (result == "0")
                            alert("用户名或密码错误,登录失败");

                    }
                }

使用jquery中的ajax方法实现ajax

type:请求的类型
data:发送的数据,是以key/value发送
success:成功时的回调函数
error:失败时的回调函数
dataType:服务端发回的数据类型
image

标签:异步,xmlhttp,请求,ajax,xmlHttpRequest,服务端,客户端
来源: https://www.cnblogs.com/fhzmasl/p/15484428.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有