AJAX的学习笔记

下午开始正式学习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。