ajax的应用原理及基本用法
来源:互联网 发布:练文笔的软件 编辑:程序博客网 时间:2024/06/06 20:23
ps:错误的地方或者不足的地方请大家多多指教
1. ajax 是干什么的?
以前我们登录一个网页,输入帐号和密码,通过提交按钮向服务器发送请求,然后客户端页面进行刷新,我们进入到正式的网站页面。但是,如果网站的访问量过大,页面进行刷新的时候就会特别慢,会造成用户体验不佳。
ajax能帮我们解决这个问题 。
按照百度上的解释:
1、AJAX 是一种用于创建快速动态网页的技术。
2、通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
3、传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
这里我们通过一个例子来解释上面的意思。
登录到我要自学网,这个时候你还处于未登录的状态。
登陆后
对比两张图,你会发现登录前后在页面没有整体刷新的情况下, 只有页面最顶上那一栏发生了变化。这就ajax的作用,不需要刷新整个页面就可以动态更改页面上的数据。
这个例子可能有问题。因为在登录的过程中会有一个跳转页面出现,不过我觉得这个跳转页面可能是js代码的效果,并不是向服务器发出请求数据的结果
2. ajax的基本写法
<script type="text/javascript"> //第一步,创建对象 var xhr = new XMLHttpRequest(); //第二步,连接服务器 xhr.open('GET',url,true);//“GET”表示请求的方式。URL指向服务器请求数据的路径。true表示异步处理。 //第三步,向服务器发送请求 xhr.send(null); /* 我们先了解一下readyState的属性。 readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。这是 readyState 属性可能的值:状态 描述 0 请求未初始化(在调用 open() 之前) 1 请求已提出(调用 send() 之前) 2 请求已发送(这里通常可以从响应得到内容头部) 3 请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应) 4 请求已完成(可以访问服务器响应并使用它) */ //第四步 请求完成,响应准备就绪。 xhr.onreadystatechange=function(){ if (xhr.readyState==4) {//表示请求已完成 if (xhr.status==200) {//xhr.status==200表示数据获取成功。 alert(xhr.responseText);//页面输出返回的数据。responseText可以获取服务器返回的数据。 }else{ alert(xhr.statusText);//未能成功获取数据则输出该结果。 } } }
(大家可以看我下一篇ajax实例代码,会有实例代码和效果展示)
这是ajax的 套路写法。
3、ajax的应用原理。
页面通过后台js代码向服务器发送请求,服务器返回数据到这段代码中。这段会对数据进行处理,动态改变页面的某一部分,这样避免了页面的重新刷新。
简单点来说就是我要更新页面的某一部分,但是没有向服务器重新请求页面,而是后台的js代码与服务器进行交流,js代码获取数据后动态修改页面。
【我的下一篇会具体发布ajax应用的实例代码】
0 0
- ajax的应用原理及基本用法
- Ajax原理及应用
- Ajax原理及应用
- AJAX原理及应用
- Ajax原理及应用
- Ajax的基本用法
- Ajax的基本用法
- ajax的基本用法
- 泛型的基本应用、内部原理及更深应用
- UPnP基本应用及原理
- 二级联动菜单及ajax的基本应用
- foreach的基本用法及原理——C#
- boost基础——variant的原理及基本用法
- STL vector的内部实现原理及基本用法
- STL vector的内部实现原理及基本用法
- Android中的Messenger的原理及基本用法
- GCD的基本介绍及常见用法和应用场景
- ajax应用的基本流程
- 事件冒泡、事件捕获、事件委托
- 缓存DOM查询
- AJAX函数的封装
- ajax实例代码及效果
- [C++]LeetCode #1 twoSum
- ajax的应用原理及基本用法
- Leetcode 366. Find Leaves of Binary Tree (Medium) (cpp)
- Codeforces 739A Alyona and mex(构造)
- C++vector的使用方法
- 【20.23%】【codeforces 740A】Alyona and copybooks
- 【81.82%】【codeforces 740B】Alyona and flowers
- Leetcode 255. Verify Preorder Sequence in Binary Search Tree (Medium) (cpp)
- Redis 发布订阅简测
- ASP中实现文件上传方法的研究