学习笔记,请多指教
学习网址推荐
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)
AJAX 可以使网页实现异步更新,创建快速动态网页(即下拉页面到底后立即刷新加载更多内容)
其实就类似于安卓的多进程和iOS的多线程啦
首先要练习AJAX的话,需要自己搭建一个服务器(具体如何搭建我这里就不花大量时间与篇幅写了,因为意义不大,纯粹练习而已,工作中会有专门的后台),并写一点服务器代码,我这里用的是一点php;
在你搭建好服务器之后,设置网站根目录,在目录中创建.php与.html文件即可;
如果是.html文件,服务器会直接渲染在浏览器,如果是.php文件,服务器会先执行完代码,将结果返回给浏览器
下面的demo是点击按钮从服务器请求不同图片与文字展示在两个div上
(images里有三张图片)
可以看出AJAX主要分五步
.html文件:
AJAX基本使用
.php文件:
'images/first.jpg|第一张图片' ,
'second' =>'images/second.jpg|第二张图片' ,
'third' =>'images/third.jpg|第三张图片'
);
// 通过$_GET[]获取 浏览器发送过来的key
// $_GET[]是php中的一个全局对象,用于收集来自 method="get"的表单中的值
$key = $_GET['name'];
//$key = $_POST['name'];
// 响应的数据
echo $infoArray[$key];
?>
下面的demo是点击按钮,从服务器的xml中读取图片名字,图片,文字展示成table
(images里有三张图片)
.html文件:
AJAX使用之POST请求XML格式数据
.php文件:
.xml文件:
XML指可扩展标记语言EXtensible Markup Language
第一张图片
images/first.jpg
哈哈哈
第二张图片
images/second.jpg
嘿嘿嘿
第三张图片
images/third.jpg
啦啦啦
下面的demo是点击按钮,从服务器的json中读取图片名字,图片,文字展示成table
(images里有三张图片)
.html文件:
AJAX使用之POST请求JSON格式数据
.php文件:
.json文件:
JSON(JavaScript Object Notation),是ECMAScript的子集,作用是进行数据的交换,而且由于语法更为简洁,网络传输,以及机器解析都更为迅速.
[
{
"name":"第一张图片",
"info":"哈哈哈",
"path":"images/first.jpg"
},
{
"name":"第二张图片",
"info":"啦啦啦",
"path":"images/second.jpg"
},
{
"name":"第三张图片",
"info":"嘿嘿嘿",
"path":"images/third.jpg"
}
]
封装在ajax.js中的AJAX请求工具
当然,封装请求工具的方式和思路有很多,这里只是基础地封装一下,最终应该根据具体项目情况操作
//1: ajax get
function ajax_get(url,data) {
var ajax = new XMLHttpRequest();
// 如果是get发送数据,这里需要拼接 url
if (data)
{
// 如果有值需要拼接字符串 格式为xxx.php?name=first&path=xxx/xxx
url+='?';
url+=data;
}
else
{
}
ajax.open('get',url);
ajax.send();
ajax.onreadystatechange = function () {
if (ajax.readyState==4&& ajax.status==200)
{
console.log(ajax.responseText);
}
}
}
//2: ajax post
function ajax_post(url,data) {
var ajax = new XMLHttpRequest();
ajax.open('post',url);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
if (data)
{
// 如果有值 post是在send中发送给服务器
ajax.send(data);
}
else
{
ajax.send();
}
ajax.onreadystatechange = function () {
if (ajax.readyState==4&&ajax.status==200)
{
console.log(ajax.responseText);
}
}
}
//3: 将 get 跟post 封装到一起
/*
参数1:url
参数2:数据
参数3:请求的方法
参数4:数据成功获取以后 调用的方法
*/
function ajax_tool(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get')
{
// get请求
if (data)
{
// 如果有值
url+='?';
url+=data;
}
else
{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}
else
{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data)
{
// 如果有值 从send发送
ajax.send(data);
}
else
{
// 没有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}
}
//4: 将工具函数进行改造 只接收一个参数对象
/*
url:请求的url
data:发送的数据
method:请求的方法
success:请求成功以后 调用的函数
*/
function ajax_tool_pro(option) {
var ajax = new XMLHttpRequest();
if (option.method=='get')
{
// get请求
if (option.data)
{
// 如果有值
option.url+='?';
option.url+=option.data;
}
else
{
}
// 设置请求方法以及option.url
ajax.open(option.method,option.url);
ajax.send();
}
else
{
// post请求 option.url 是不需要改变
ajax.open(option.method,option.url);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断option.data send发送数据
if (option.data)
{
// 如果有值 从send发送
ajax.send(option.data);
}
else
{
// 没有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 外面可以传入一个函数作为参数success
option.success(ajax.responseText);
}
}
}
两种工具的调用方式: