什么是 Ajax?(前后端数据交互)###
- Asynchronous JavaScript and XML(异步 JavaScript 和 XML)
- [ol]
[li]节省用户操作时间, 提高用户体验, 减少数据请求[/li]
[li] 传输获取数据[/li]
[/ol]
ajax 流程:
javascript 代码
form 表单:
action: 数据提交地址, 默认是当前页面
method: 数据提交方式, 默认是 get 方式
1.get
把数据名称和数据值用 = 连接, 如果有多个的话, 那么他会把多个数据组合用 & 进 行连接, 然后把数据放到 url? 后面传到指定页面 url 长度限制的原因, 我们不要通过 get 方式传递过多的数据
2.post
理论上无限制
enctype: 提交的数据格式 , 默认是: application/x-www-form-unlencoded
- application/x-www-form-urlencoded
- ### 清除 ajax 缓存:
一 GET 方式请求
如果两次请求的 url 相同的话 浏览器 (不同缓存机制的浏览器会有所不同) 会直接将第一次请求的结果给第二次请求
防止这种缓存的方法:
请求的 url 地址? t=new Date()
二 POST 方式请求
浏览器认为 Post 的提交必然是有改变的 所以一般 post 请求 不会从缓存中去数据
三 Jquery 中的有设置缓存的开关
不管是哪中方式请求 我们可以设置缓存开关:
- $ajax.Setup({ cache:false});
- xhr.open('get', '2.get.php?username=' + encodeURI('刘伟') + '&age=30&' + new Date().getTime(), true);
encodeURL()处理中文乱码问题
###get 方式提交数据
javascript 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
- 无标题文档
- </title>
- <!--<script src="jquery.js"></script>-->
- <script>
- //$(function(){}) // 阻塞 -> 同步
- // 非阻塞 - 异步
- /*setTimeout(function() {
- alert(1);
- }, 2000);
- alert(2);*/
- window.onload = function() {
- var oBtn = document.getElementById('btn');
- oBtn.onclick = function() {
- var xhr = null;
- try {
- xhr = new XMLHttpRequest();
- } catch(e) {
- xhr = new ActiveXObject('Microsoft.XMLHTTP');
- }
- /*
- 1. 缓存 在 url? 后面连接一个随机数, 时间戳
- 2. 乱码 编码 encodeURI
- */
- xhr.open('get', '2.get.php?username=' + encodeURI('刘伟') + '&age=30&' + new Date().getTime(), true);
- xhr.send();
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- alert(xhr.responseText);
- } else {
- alert('出错了, Err:' + xhr.status);
- }
- }
- }
- }
- }
- </script>
- </head>
- <body>
- <input type="button" value="按钮" id="btn" />
- </body>
- </html>
- ###post 方式提交数据
javascript 代码
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>
- 无标题文档
- </title>
- <!--<script src="jquery.js"></script>-->
- <script>
- //$(function(){}) // 阻塞 -> 同步
- // 非阻塞 - 异步
- /*setTimeout(function() {
- alert(1);
- }, 2000);
- alert(2);*/
- window.onload = function() {
- var oBtn = document.getElementById('btn');
- oBtn.onclick = function() {
- var xhr = null;
- try {
- xhr = new XMLHttpRequest();
- } catch(e) {
- xhr = new ActiveXObject('Microsoft.XMLHTTP');
- }
- xhr.open('post', '2.post.php', true);
- //post 方式, 数据放在 send()里面作为参数传递
- xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); // 申明发送的数据类型
- //post 没有缓存问题
- // 无需编码
- xhr.send('username = 刘伟 & age=30');
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- alert(xhr.responseText);
- } else {
- alert('出错了, Err:' + xhr.status);
- }
- }
- }
- }
- }
- </script>
- </head>
- <body>
- <input type="button" value="按钮" id="btn" />
- </body>
- </html>
- ### 封装 ajax.js
来源: http://www.qdfuns.com/article/45942/2b542360a1055c4d6a0d46b7d20b4941.html