Ajax快速入门
|
最近需要使用ajax，json传数据，快速学习了下ajax，把基本的东西拿出来分享一下，打算以问题的形式来进行文章的编写~go！ （一）什么是Ajax？ Ajax是一种无需加载整个网页，快速刷新局部网页的技术。Ajax不是新的编程语言，而是一些老技术的融合。
（二）Ajax用到了什么技术？ 异步数据获取技术：使用XMLHttpRequest 基于标准的表示技术（即静态页）：使用XHTML和CSS 动态显示和交互技术：使用Document Object Model(DOM) 数据互换和操作技术：使用XML与XSLT，现在流行的还有JSON javascript：作为胶水语言将上述技术融合在一起 基本上也可以说，Ajax全是用javascript编写的~~
（三）什么是XMLHttpRequest？ XMLHttpRequest对象是Ajax的核心，现在的浏览器都支持这个对象，XMLHttpRequest对象用于在后台与服务器交换数据
（四）如何XMLHttpRequest对象？ 对应于不同的浏览器，有不同的创建方法。 现在的浏览器，都可通过 var xmlhttp = new XMLHttpRequest();
来创建XMLHttpRequest对象~！ 而对于IE5，IE6等老版本浏览器，则使用 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
来创建~ 下面这串代码是一个通用的解决办法，可以满足根据不同浏览器调用不同的XMLHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6,IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
通过XMLHttpRequest对象的open（）方法和send（）方法，即可向服务器发送请求 open(method,url,async)方法， method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） send(string)方法 string：仅用于 POST 请求
先看看get请求~ xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
再看看POST请求~ xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
其实两者差不多对吧？POST是可以传递数据的，怎么传? xmlhttp.open("POST","ajax.jsp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=steven&lname=Jobs");
异步传输async参数请填写true~
（六）POST和GET有什么不同？ 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 GET其实并不常用，因为GET属于明文传输，不安全~
（七）怎么接受服务器的响应？ 只需要使用到XMLHttpRequest的两个属性，分别是responseText和responseXML 看名字就知道，他们分别对应的是 普通文本 和 XML文件~ 代码如下，只需替换最后的responseText为responseXML即可接受并解析XML文件~ document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
（八）关于回调函数onreadystatechange是怎么回事“ 当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。 readyState的5种状态： 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
上面就是AJAX最基本的内容，了解这些，再看两个实例，就可以去学习AJAX的框架了~
AJAX的框架发展到现在实在太多了，这里建议使用jquery~
??
??
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |