AJAX 教程

AJAX 教程
- 简介
- 前提
- AJAX 应用
  - 什么叫做异步？
  - 异步的概念
  - 回调函数
  - XML
  - XMLHttpRequest 对象
- AJAX - 创建 XMLHttpRequest 对象
- 后台编程语言 - PHP
- php参考手册
  - 上传文件
  - php注意点
- XMLHttpRequest()
  - 请求报文
  - HTTP协议
- XML
- Ajax
- 在w3cschool深入了解ajax
- 开始学习JSON！
- ajax封装

简介

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

前提

阅读本教程，您需要有以下基础：

HTML 和 CSS 基础
JavaScript 基础

AJAX 应用

运用 XHTML+CSS 来表达资讯；
运用 JavaScript 操作 DOM（Document Object Model）来执行动态效果；
运用 XML 和 XSLT 操作资料;
运用 XMLHttpRequest 或新的 Fetch API 与网页服务器进行异步资料交换；

什么叫做异步？

JavaScript 异步编程

异步的概念

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

以上是关于异步的概念的解释，接下来我们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。

什么时候用异步编程
在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

XML

XML 指可扩展标记语言（eXtensible Markup Language）。

XML 被设计用来传输和存储数据。

XML 很重要，也很容易学习。

现在开始学习 XML!

XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

在不重新加载页面的情况下更新网页
在页面已加载后从服务器请求数据
在页面已加载后从服务器接收数据
在后台向服务器发送数据
如需学习更多关于 XMLHttpRequest 对象的知识，请学习 XML DOM 教程。

AJAX - 创建 XMLHttpRequest 对象

XMLHttpRequest 是 AJAX 的基础。

XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 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");
}

后台编程语言 - PHP

php参考手册

php是最好的语言！
因为php语言跟javascript很像！
基本上我们想到的功能都有对应的函数来实现！

<?php//单行注释/*多行注释*///设置编码格式,以正确显示中文header('content-type:text/html;charset=utf-8')//输出文字echo 'Hello world! 你好！';// 定义变量$name = '变量';echo $name;$num = '123';echo $num;echo '<br>';$buer = true;if($buer == true) {echo 'buer is true';}else{echo 'error';}//选择语句$day = '礼拜天';switch($day){case '礼拜一':case '礼拜二':case '礼拜三':case '礼拜四':case '礼拜五':echo '上班';case '礼拜六':echo '继续加班';case '礼拜七':echo 'ついに休憩できるだな';break;}//循环for($i=0;$i<10;$i++){echo '<br>';echo '感觉自己萌萌哒'.$i;}$n = 0;while($n<50){echo 'while'.$n;echo '<br>';$n++;}do{echo '进来了吗';} while (false);// 数组$foodarr = array('榴莲','苹果','西兰花','西兰花炒蛋');echo $foodarr[3];echo '<br>';// 直接繁输出函数输出print_r($foodarr);// 遍历// 获取数组的长度，使用count()函数，返回值为一个数字echo count($fooder);for($i=0;$i<count($foodarr);$i++){echo '<br>';echo $i;}// 索引数组（对象）$person = array('name'=>'吴京','film'=>'战狼','wife'=>'谢楠')echo $person['wife'];print_r($person);//遍历// $key 代表循环的键，$value 代表循环的值foreach ($person as $key => $value) {echo $key.'----'.$value.'<br>';}// 关系型数组 - 二维数组$starArr = array(array('name'=>'刘德华','film'=>'无间道','friend'=>'曾志伟'),array('name'=>'初音ミク','film'=>'言葉を','friend'=>'鏡音リン'),array('name'=>'大鉄','film'=>'神ナギ','friend'=>'服リア'),array('name'=>'アヤカ','film'=>'トデシ','friend'=>'綾倍'),);echo $starArr[2]['film'];// 遍历输出二维数组for($i=0;$i<count($starArr);$i++){echo '<h4>尊敬的</h4>'.$starArr[$i]['name'].'的电影有'.$starArr[$i]['film'].'<span style="color:red;font-size:15px;">友達は</span>'.$starArr[$i]['firend'].'さんです'.'<br>';}//php文件的引入include './path/index.php';//格式化输出echo '<ul>';for($i=0; $i<count($starArr);$i++) {echo '<li>';echo '<a href="'.$starArr[$i]['name'].'">点击此处查看'.$starArr[$i]['name'].'</a>';echo '<img src="'.$starArr[$i]['path'].'" alt="">'.'注意此处的path代表路径，因为并没有赋值所以没有图片';echo '<span>她的朋友是：'.$starArr[$i]['friend'].'</span>';echo '<li>';}echo '</ul>';// form表单发送数据// 接收提交的数据// get方式：echo $_GET.<br>;print_r($_GET);$varis = $_GET('input_name');// 在datas.php中查询相匹配的值（模仿数据库而已）include './datas.php';$name = $starArr[$varis];print_r($name);?>
// 表单有两种提交方式get、post，默认的是get,
<form action="./index.php" method="get">
<input type="text" placeholder="默认值" name="input_Nmae">
<input type="submit">
</form>// 利用特性来进行动态写入（不要忘了分号！）：
<span>你竟然喜欢吃：<?php echo '$food'.<br>.'！'; ?>真是令人大吃一惊呢！</span>

上传文件

<h1>上传文件操作,必须使用post方式</h1>
<form action="./name.php" method="post" enctype="multipart/form-data">
<input type="file" name="icon">
<input type="submit">
</form>
<?php// 假设这是一个单独的php文件，接收提交的图像文件$_FILES// post方式-post提交数据// 即使是文件也是按数组的形式去储存print_r($_FILES);/*Array ([icon] => Array ([name] => 001.jpg[type] => image/png[tmp_name] => C:\tmp\123\php52F7.tmp[error] => 0[size] => 13949))*/// 默认执行完所有php代码之后会立刻销毁临时文件，我们让它五秒后再执行销毁(可删除该延迟)sleep(5);move_uploaded_file($_FILES['icon']['tmp_name'],'./newPath/newPath'.$_FILES[icon]['name']);
?>

php注意点

php文件只能通过服务器访问！不可以本地访问
必须将php代码包裹在php的标签里面<?php ?>
文件的命名不要用中文
为了让语言正常显示须要设置编码格式
php编程的语言是很严格的，不得漏写分号
写在php标签之外的代码，不会执行，会原封不动地交给浏览器处理！
因此我们常常利用这点在php文档的php标签外写原生的html代码、css样式表、甚至是javascript！
归纳：需要动态处理的写在php标签的内部，不需要动态处理的则写在外面，当成html文档使用即可
php中为我们提供了一些超全局变量，
跟js 中window 对象类似，不需要定义直接就可以使用
表单中提交数据要确保使用了name属性！
get得到的数据多条数据的格式：
…/xxx.php?key1=value1&key2=value2&key3=value3
key即是name
特点：在地址栏可以看到是字符串的拼接
数据的安全性不好
数据的长度带来的问题
post提交的内容将不会在url栏显示
安全性好一点
没有长度限制，但是服务器端一般是要限制数据量的
如果要上传文件，必须使用post
如果要提交文件，要额外为form的设置一项属性！
enctype编码属性！！！在w3cschool查看！
默认值：application/x-www-form-urlencoded
上传文件是必须使用：
multipart/form-data
介绍：
不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

上传文件的注意点：上传完之后生成的tmp临时文件会在php执行完之后销毁，
要想查看该临时文件需要用函数让php上传完文件后的操作执行的慢一点
使用sleep(5);
在w3cschool学习如何将上传的文件移动到指定的文件夹
move_uploaded_file() 将上传的文件移动到新位置。

XMLHttpRequest()

请求报文

请求行：
1. 请求方式
2. 请求地址
请求头：
1. 浏览器的信息
2. 接受的语言格式
3. 等一些浏览器的信息以及一些想要发送给浏览器的信息
请求主体
1. 发送给服务器的数据内容

HTTP协议

请求报文
响应报文

XML

创建异步对象：var xhr = new XMLHttpRequest();

<script>// 绑定点击事件document.querySelector('input').onclick = function() {// 创建异步对象var xhr = new XMLHttpRequest();}// 请求行 表单get 到php// get请求的数据是 拼接在url里面的，// 因此下面的xxx.php后面也可以拼接对应格式的数据，这样可以达到提交数据而且数据内容不会显示在url栏的效果xhr.open('GET','xxx.php');// 注册回调函数，我们并不知道一个请求经过多长时间会得到响应xhr.onload = function(){console.log('请求响应回来啦');alert(xhr.responseText);}// 请求头 键名 值// get请求可以省略 请求头的操作xhr.setRequestHeader('keyname','value');// 请求主体 发送 我不想发送啥信息所以填了nullxhr.send(null);</script>

Ajax

接下来，终于要开始我们的ajax学习啦！
固定的xml请求套路：

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>点击的时候发送请求报文但是不刷新页面</title>
</head>
<body><button class="btn btn-primary" value="request" type="button">Request</button><h3>等待响应...</h3><script>document.querySelector('button').onclick=function(){// 创建对象var xhr = new XMLHttpRequest();// 设置请求行（get请求数据可以跟在url后面，如果方式为post，则请求内容写在send里面）xhr.open('get','getData.php?name=rose&skill=swim');// 设置请求头（get请求可以省略，post不发送数据也可以省略）// 假如方式改为postxhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//     注册回调函数xhr.onload = function() {// 获取数据console.log(xhr.responseText);// 修改页面的DOM元素document.querySelector('h3').innerHTML = xhr.responseText;}// 请求主体发送（get请求为空，或者写null，post请求数据写在这里，如果没有数据直接为空或nullxhr.send(null);// 假如是post： xhr.send(name=keywords&skill=vlaue);}</script></body>
</html>

getData.php

<?php
print_r($_GET);
sleep(1);
// 下面是一个模拟
$nameArr=array('kuyoru','kty','psd','jiuye');
$result=in_array($name,$nameArr);
if $result==true) {echo '该值已被用户注册！';
}else{echo '该值不存在于数据库，可以放心使用';
}?>

在w3cschool深入了解ajax

开始学习JSON！

为什么使用 JSON？
因为 JSON 格式仅仅是文本，它能够轻松地在服务器浏览器之间传输，并用作任何编程语言的数据格式。

JavaScript 提供內建函数把以 JSON 格式写的字符串转换为原生 JavaScript 对象：

JSON.parse()

因此，如果您以 JSON 格式从服务器接收数据，那么您可以像任何其他 JavaScript 对象那样使用它。

ajax封装

为了便于开发和批量处理xml请求，我们可以将ajax封装到一个function函数里面
XMLHttpRequest.responseXML
success()函数是ajax()向后台请求成功后自动调用的，在success(response)函数里面的变量只有一个,且里面不能调用自定义的变量，response是后台返回来的值。
需求：如果确实需要在success()函数里面调用自定义的变量，可以将ajax()函数封装起来，由外部函数传入自定义的参数

【Ajax】简单入门 - 不深究相关推荐

ajax地址为jsp,AJAX_在jsp中运用ajax(简单入门)，由于ajax为我们带来太多的好处 - phpStudy...
在jsp中运用ajax(简单入门) 由于ajax为我们带来太多的好处,所以在很多应用中我们都会优先选择这种技术,于是我也为之所吸引,现跟大家分享下一个简单的入门例子. regist.jsp文件:一个简 ...
php全选删除,php+ajax简单实现全选删除的方法
本文实例讲述了php+ajax简单实现全选删除的方法.分享给大家供大家参考,具体如下: 删除 ↑全选checkbox ↑为删除项,同一命名class为ckb,方便操作,同时将id值巧妙的放入input ...
Ajax程序设计入门
Ajax程序设计入门一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担, ...
80篇各ajax框架入门教程
AJAX经典入门教程,入门实例,入门代码收藏. *VS2008 Ajax.NET快速入门教程* (2008-3-25) [本站原创]Ajax!?!入门教程之道 (2008-4-13) [本站原创]Aj ...
Javaweb（AJAX快速入门）
中哈喽丫各位本次讲jweb的(AJAX快速入门&&AJAX实现分页) 好了直接进入主题在进入主题前看看本次思维导图 ==========================jQuery之 ...
BizTalk 2006 简单入门示例程序（附源项目文件下载）
BizTalk 2006 简单入门示例程序(附源项目文件下载) 为初学BizTalk Server 2006的开发人员,提供一个简单入门的示例程序,包括一个Receive Port.Send Port ...
python如何读取mat文件可视化_python Matplotlib数据可视化（1）：简单入门
1 matplot入门指南 matplotlib是Python科学计算中使用最多的一个可视化库,功能丰富,提供了非常多的可视化方案,基本能够满足各种场景下的数据可视化需求.但功能丰富从另一方面来说也意 ...
ARM NEON 编程简单入门1
原文:http://blog.csdn.net/silentob/article/details/72954618 ARM NEON 编程简单入门1 NEON简介 NEON是适用于ARM Corte ...
Python 简单入门指北(二)
Python 简单入门指北(二) 2 函数 2.1 函数是一等公民一等公民指的是 Python 的函数能够动态创建,能赋值给别的变量,能作为参传给函数,也能作为函数的返回值.总而言之,函数和普通变量 ...

【Ajax】简单入门 - 不深究