ajax 学习总结
来源：互联网 发布：网络教育学籍参军 编辑：程序博客网 时间：2024/06/06 02:15
学习一样动习首先应该明白： 这是什么？
ajax是什么？
我们就从理解“ajax”的字面含义开始。
AJAX =
Asynchronous （美[e’sɪŋkrənəs]） 异步的
JavaScript
And
XML
也就是说，ajax就是异步的 JavaScript 和 XML。
什么意思呢？我说一个实际需求你就明白了。
我们在浏览网页时候，想要重新加载整个页面，按一下“f5”键就行了。但是如果我们只想获取局部数据，如果让整个页面都重新加载必定很浪费流量。而通过一部请求数据的方式（AJAX ），可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。
在Ajax普及之前，也有实现局部刷新的方法——Iframe 框架。
这种方式简单说就是页面里面嵌套页面，当表单提交后，相应的内容会返回到iframe框架中，主页面的内容不更新。
原生AJAX
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax登录</title></head><body><div> <div id="showInfo"></div> <form id="form"> 用户名：<input type="text" name="username" id="username"><br> 密码：<input type="password" name="password" id="password"> <input type="button" id="btn" value="登录"> </form></div> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ //点击事件获取用户输入需要验证的信息 var username = document.getElementById("username").value; var password = document.getElementById("password").value; //第一步：设置一个xhr变量，并做XMLHttpRequest浏览器兼容 //XMLHttpRequest 对象用于在后台与服务器交换数据。 var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); //标准浏览器 }else{//低版本IE浏览器 xhr = new ActiveXObject("Mcrosoft.XMLHTTP"); } //第二步：配置发送请求的一些参数,准备发送请求 var url = './check.php?username='+username+"&password="+password; //拼接URL，后台文件名用？参数和参数之间用&链接 xhr.open('get',url,true); //请求是同步还是异步，异步为true，同步为false，默认为true //第三步：执行发送的动作 xhr.send(null); //第四步：指定一些回调函数 xhr.onreadystatechange = function(){ //Ajax中的回调函数类似于setTimeout中的定时函数，先定义后执行 if(xhr.readystate == 4 && xhr.status == 200){ //首先判断请求是否完成 并且成功得到请求的数据 var data = xhr.responseText; //获得字符串形式的响应数据,并把返回的数据存放到data变量里面 if(date == 1){ //接下来对数据如何操作根据需求写相应的代码 document.getElementById('showInfo').innerHTML = '用户名或者密码错误'; }else if(data == 2){ document.getElementById('showInfo').innerHTML = '登录成功'; } } } } } </script></body></html>后台的数据我们用PHP简单实现：
<?php $username = $_GET['username'];$password = $_GET['password'];if($username == 'admin' && $password == '123'){ echo 2;}else{ echo 1;}?>相信刚开始学习AJAX的同学跟我一样，对上述代码有很多疑问，下面我分享一下，我的疑问以及找到的解答：
- 问题1：为什么send（），里面要用null？
1) 一般情况下，使用Ajax提交的参数多是些简单的字符串，可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null。也就是说send是用来传递获取数据的URL的参数的，如果我们用get方法请求，可以直接在第二步，也就是准备请求的参数时，用为变量拼接URL,这是不需要传递参数了，一般浏览器可以用send（），但是低版本浏览器只支持send（null），为了兼容最好写send（null）。
var url = "login.jsp?user=XXX&pwd=XXX"; xmlHttpRequest.open("get",url,true); xmlHttpRequset.send(null);2) 也可以使用send方法传递参数。使用send方法传递参数使用的是POST方法，需要设定Content-Type头信息，模拟HTTP POST方法发送一个表单，这样服务器才会知道如何处理上传的内容。参数的提交格式和GET方法中url的写法一样。设置头信息前必须先调用open方 法。
xmlHttpRequest.open("POST","login.jsp",true); xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8"); xmlHttpRequest.send("user="+username+"&pwd="+password);- 问题2 ： 如何拼接URL？
例：
http://www.sina.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
从上面的URL可以看出，一个完整的URL包括以下几部分：
1.协议部分：该URL的协议部分为“http：”，在”HTTP”的后面分隔符为“//”。这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。
2.域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用。
3.端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口。
4.虚拟目录部分：从 域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”。
5.文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名。
6.锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分。
7.参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。这一点对前端拼接URL极为重要。前面几条可以了解，这一条必须记住参数URL中？和&如何使用。
- 问题3：open()方法是干什么的？
open方法创建一个请求，并准备向服务器发送，
open（method,url,async,user,password)。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async 请求是同步还是异步，同步为false，异步为true，默认为true
user 指定请求的用户名，没有就省略。
password 同上。
- 问题4： 判断 xhr.readystate == 4 && xhr.status == 200 根据是什么？
readystate的5种状态，可以据此判断数据请求的进度。
• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪
status的3种常用状态 ，据此判断是否获得数据。
200: “OK”
404: 未找到页面
503 服务器端有错误
好了，至此，咱们可以通过ajax获得了数据，既然得到数据，就得使用数据，下面就说说ajax如何解析得到的数据。
用原生AJAX实现解析数据
ajax可以使用的数据格式有很多，比如XML、JSON、JSONP、HTML、script、text等，比较常用的是前2种，下面分别介绍他们的解析方式。
1. ajax 对 xml数据的解析
XML数据格式：
<?xml version="1.0" encoding="utf-8"?><!-- 这句话必须写上 --><bookstore> <book> <name>三国演义</name> <category>文学</category> <desc>描述</desc> </book> <book> <name>水浒传</name> <category>文学</category> <desc>草寇or英雄豪杰</desc> </book> <book> <name>西游记</name> <category>文学</category> <desc>妖魔鬼怪牛鬼蛇神什么都有</desc> </book> <book> <name>红楼梦</name> <category>文学</category> <desc>宝哥哥与林妹妹的爱情史</desc> </book> </bookstore>解析代码及分析：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>json文件</title><script type="text/javascript"> window.onload = function(){ var btn = document.getElementById('btn'); btn.onclick = function(){ showBookInfo(); } function showBookInfo(){ document.getElementById('bookInfo').innerHTML = ''; var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } xhr.open('get','./data.xml'); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = xhr.responseXML; //获取XML格式的数据 var bs = data.getElementsByTagName('bookstore')[0]; var books = bs.getElementsByTagName('book'); var tag = ''; //设置一个变量，存放文本内容 for(var i=0;i<books.length;i++){ var book = books[i]; //循环获得数据的元素节点，即带标签 var name = book.getElementsByTagName('name')[0]; var category = book.getElementsByTagName('category')[0]; var desc = book.getElementsByTagName('desc')[0]; tag += '<tr><td>'+getNodeText(name)+'</td><td>'+getNodeText(category)+'</td><td>'+getNodeText(desc)+'</td></tr>';// 拼接tag内部的内容，是表格形式 } var tbody = document.createElement('tbody'); tbody.innerHTML = tag; //把tag赋予tbody document.getElementById('bookInfo').appendChild(tbody); } } } } //封装一个函数，获取元素节点内容 function getNodeText(node){ if(window.ActiveXObject){//IE return node.text; }else{//标准浏览器 if(node.nodeType == 1){ //如果节点是元素节点，则 nodeType 属性将返回 1。 //如果节点是属性节点，则 nodeType 属性将返回 2。 return node.textContent; } } }</script></head><body> <input type="button" value="点击" id="btn"> <div> <table id="bookInfo"> </table> </div></body></html>2.ajax 对 json 数据的解析
Json数据样式：
{ "total":"4", "data":[ { "name":"三国演义", "category":"文学", "desc":"一个军阀混战的年代" },{ "name":"水浒传", "category":"文学", "desc":"草寇or英雄好汉" },{ "name":"西游记", "category":"文学", "desc":"妖魔鬼怪牛鬼蛇神什么都有" },{ "name":"红楼梦", "category":"文学", "desc":"一个封建王朝的缩影" } ], "obj":{"adf":"adf"}}解析代码及分析
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>json文件</title><script type="text/javascript"> window.onload = function(){ var btn = document.getElementById('btn'); btn.onclick = function(){ showBookInfo(); } function showBookInfo(){ var xhr = null; //第一步：创建xhr对象，XMLHttpRequest 对象用于在后台与服务器交换数据。 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //第二步：准备发送请求，配置请求的一些行为 xhr.open('get','./data.json'); //第三步：执行发送请求 xhr.send(null); //第四步：准备请求的回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ var data = JSON.parse(xhr.responseText); // JSON.parse() 方法解析一个JSON字符串，构造由字符串描述的JavaScript值或对象。 // 还可以用eval函数 data = eval("("+ str +")");eval函数有风险，推荐使用json.parse var total = data.total; var list = data.data; //获取PHP后台data数据 var tag = ''; for(var i=0;i<total;i++){ //循环获取list数据里的每个元素 var book = list[i]; tag += '<tr><td>'+book.name+'</td><td>'+book.category+'</td><td>'+book.desc+'</td></tr>'; } var tbody = document.createElement('tbody'); tbody.innerHTML = tag; document.getElementById('bookInfo').appendChild(tbody); } } } }</script></head><body> <input type="button" value="点击" id="btn"> <div> <table id="bookInfo"> </table> </div></body></html>jQuery的ajax方法
该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。
$("#button").click(function(){ $.ajax({ url:"data.php", //请求数据的地址 dataType:"text", //数据类型 type:"get",//请求方式 success:function(data){ //请求成功时的回调函数 alert(data); }, error:function(e){ //请求失败使回调函数 console.log(e); //可以在控制台输出错误提示 } }); });ajax跨域解决方案
ajax跨域指的是：安全性的问题，浏览器默认不支持请求不是本地或者同一个服务器下面的URI。否则最后会导致虽然请求状态200，但是不会返回任何数据。
哪些属于跨域呢？我们一http://www.example.com/为例进行分析：
综上，在请求的一个URL里面，如果协议、域名、端口有一个不同，就跨域了。
- Script的src方式加载js文件，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。
<script type="text/javascript" src="./data.js"></script>/*通过这种方式可以获取其他设备上的文件，包括数据文件*/这就是经常说的jsonp方式，它不是数据形式而是一种json数据的传输方式。
原生Jsonp方式获取数据：
HTML代码：
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jsonp</title></head><body> <script type="text/javascript"> function cb(data){ console.log(data); } // 回调函数 </script> <script type="text/javascript" src="jsonp.php?_jsonp=cb"></script><!-- 引入PHP文件，注意格式 ，后面要有回调函数的名称--></body></html>后台PHP代码：
<?php $callback = $_GET['_jsonp'];$arr = array("1","11","111");echo $callback."(".json_encode($arr).")"; ?>Jquery 的jsonp 方式获取数据
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery跨域jsonp</title></head><body><input type="button" id="btn" value="点击"><script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript">$(function(){ $.ajax({ type : "get", async: true, url : "./jsonp.php", dataType : "jsonp", jsonp: "onJsonPLoad", //在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。 jsonpCallback:"cb",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名 success : function(data){ console.log(data); }, error:function(){ console.log('fail'); } });});</script></body></html>ajax 的基础只是目前就这么多，可能有些细节知识没有涉及到，或者有些地方不够全面，以后学习之后会继续汇总进来。
- Ajax 学习总结[转载]
- Ajax 学习总结
- AJAX学习总结
- Ajax学习总结1
- ajax 学习总结
- AJAX入门学习总结
- AJAX入门学习总结 .
- AJAX学习步步总结
- Ajax入门学习总结
- AJAX入门学习总结
- ajax学习总结2
- Ajax学习总结
- Ajax 初步学习总结
- Ajax学习总结
- struts2 学习总结 ---- Ajax
- javascript Ajax 学习总结
- Ajax学习总结
- AJAX技术学习总结
- 联想台式机Windows 7系统设置双显示器输出
- 二进制中1的个数
- javaSE 第77节课
- oracle 以timestamp为条件查询
- 在Spark结构化流readStream、writeStream 输入输出，及过程ETL
- ajax 学习总结
- VC 下Microsoft Speech SDK开发语音识别
- 两个栈实现一个队列
- caffe单独移植出来需要的工程配置和注意点,CPU版本和GPU版本！
- VS2010错误“LINK : fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏”解决办法
- CC2530 timer pwm
- LeetCode
- safeC++
- 互联网企业安全建设
