下午开始正式学习AJAX,简单看了一下内容不是很多。争取一个小时能学完,也就是两点半能够学完。
今天至少要实现两个功能,第一个是PC端页面的正式展示。第二个图片放大,第三个是更多图片的滑动条。。
AJAX-创建XMLHttpRequest对象 XMLHttpRequest是AJAX的基础。
XMLHttpRequest对象 所有现代浏览器均支持XMLHttpRequest对象。XMLHttpRequest用于在后台与服务器交换数据。这意味可以在不重新加载整个页面的情况下,对整个页面进行部分更新。
所有现代浏览器都内建了XMLHttpRequest对象 创建该对象的语法是 variable = new XHLHttpRequest();
老版本的Internet Explorer使用ActiveX对象:
variable = new ActiveXObject("Microsoft.XMLHTTP");
所以,对于所有的现代浏览器,其中有IE5和IE6,先检查一下确定能够支持XMLHttpRequest对象。如果支持,就创建XMLhttpRequest对象。如果不支持,就创建ActiveXObject;
实例:
var xmlhttp;
if (window.XMLHttpRequest)
{
//IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
}else{
//IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
XHR 请求--向服务器发送请求
XMLHttpRequest 对象用于和服务器交换数据。
所以首先你要创建一个XMLHttpRequest对象,然后才能通过这个对象发送请求。是吧。。。
如需将请求发送到服务器,使用XMLHttpRequest对象的open()和send()方法:
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
具体的语法
open(method,url,async) 规定请求的类型,url以及是否异步处理请求。method:请求的类型;Get或者Post url:文件在服务器上的位置 async:true(异步)或 false(同步)
send(string) 将请求发送到服务器 string:仅用于POST请求
既然有POST和GET 那么就有POST和GET的选择问题,
和POST相比,GET更简单也更快,并且在大部分情况下都能够使用。但是有些情况下,推荐使用POST请求:
· 无法使用缓存文件(更新服务器上的文件或者数据库)
· 向服务器发送大量数据(原因是POST没有数据量的限制)
·发送包含未知字符的用户输入时,POST比GET更稳定也更可靠
可以写一个简单的GET请求
xmlhttp.open("GET","/xyz/xyz.php",true);
xmlhttp.send();
在上面的例子中,您可能得到的是缓存的结果?基础知识的问题?
为了避免这种情况,向URL添加一个唯一的ID:
xmlhttp.open("GET","/xyz/xyz.php?t=" + Math.random(),true);
xmlhttp.send();
如果要想用GET向浏览器发送信息,可以在URL中添加信息:
比如之前的xmlhttp.open('GET',"/xyz/xyz.php?fname=Henry&lname=Ford",true);
简单的POST请求
一个简单的POST请求
xmlhttp.open("POST","/xyz/xyz.php",true);
xmlhttp.send();
如果需要想HTML表单那样POST数据,要使用setRequestHeader()来添加HTTP头。然后在send()方法中规定您希望发送的数据:
xmlhttp.open("POST","/xyz/xyz.php",true)'
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencode");
xmlhttp.send("fname =Henry&lname=Ford");
异步--True or False
XMLHttpRequest对象如果要用于AJAX的话,其open方法async参数必须是指为true;
xmlhttp.open("Get","ajax-text.html",true);
对于web开发人员来说,发送异步请求是一个巨大的进步。在很多服务器执行任务都相当费事。
通过AJAX,JavaScript无需等待服务器的响应,而是:
·等待服务器响应时,执行其他脚本
·当响应就绪后对响应进行处理
....ajax的功能大概了解了一点之后
接着查看jQuery中 Ajax的使用方法
jQuery load()方法
load() 方法从服务器中加载数据,并把返回的数据放入被选入的元素中。
语法
$(selector).load(URL,data,callback);
URL 必需的 规定你希望加载的URL
data 可选的 参数规定与请求一同发送的查询字符串键/值对集合
callback 可选的 load()方法完成后所执行的函数名称
接下来看一个例子
<h2>jQuery AJAX 是一个非常棒的功能!</h2>
<p id = "p1" >这是段落的一些文本</p>
下面的例子会把文件“demo_test.txt”的内容加载到指定的<div>元素中:
$("#div1").load("demo_test.txt");
也可以把jQuery选择器添加到URL函数。
下面的例子把“demo_test.txt”文件中id="p1"的元素的内容,加载到指定的<div>元素中:
$("#div1").load("demo_test.tex" #"p1");
jQuery中jQuery.ajax()的用法
参数名:
url string 发送请求的地址
type 请求方式(“get”post“”)
timeout number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
beforeSend Function 发送请求前可修改
Window Location window.location 对象在编写时可以不使用window这个前缀
一些例子
location.hostname 返回web主机域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口(80或443)
location.protocol 返回所使用的web协议(http:// 或http://)
location.href 属性返回当前页面的URL。