ajax教程？ajax的工作原理是什么(附图解)
在这个信息爆炸的时代，了解ajax教程和ajax的工作原理是什么(附图解)的重要性不言而喻。本文将为您带来全面的解读，助您在这个领域中游刃有余。
ajax的工作原理是什么(附图解)
本篇文章主要和大家讲述ajax的工作原理，具有一定参考价值，感兴趣的朋友可以了解一下，希望对你有所帮助。
Ajax指Asynchronous JavaScript and XML（异步的 JavaScript和 XML），最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。而实现的原理基础就是：网页DOM对象可以精确地对网页中的部分内容进行操作、XML作为单纯的数据存储载体使得客户端与服务器交换的只是网页内容的数据而没有网页样式等等的附属信息、XMLHttpRequest是与浏览器本身内置的request相互独立的与服务器交互的请求对象。
网页应用Ajax与服务器交互的抽象过程如下图：
过程详解：
1：要使用Ajax技术，基础中的基础，就是要创建一个XMLHttpRequest对象，无它就没有异步传输的可能：
var xmlhttp;
if(window.XMLHttpRequest){//检查浏览器的XMLHttpRequest属性，如果为真则支持XMLHttpRequest
// IE7+, Firefox, Chrome, Opera, Safari浏览器执行代码
xmlhttp=new XMLHttpRequest();
} else{
// IE6, IE5浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} 2：在网页中为某些事件的响应绑定异步操作：通过上面创建的xmlhttp对象传输请求、携带数据。在发出请求前要先定义请求对象的method、要提交给服务器中哪个文件进行请求的处理、要携带哪些数据、是否异步。
其中，与普通的request提交数据一样，这里也分两种方法：GET/POST
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",);
xmlhttp.send();xmlhttp.open("POST","/try/ajax/demo_post2.php","Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford"); 3：服务器收到请求后，把附带的数据作为输入传给处理请求的文件，例如这里：把fname=Henry&lname=Ford作为输入，传给/try/ajax/demo_get2.php这个文件。然后文件根据传入的数据做出处理，最终返回结果，通过response对象发回去。客户端根据xmlhttp对象来获取response内容，然后调用DOM对象根据response内容来局部修改网页内容。
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4&& xmlhttp.status==200)//请求处理完毕且状态为成功
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//用response内容来修改DOM中的元素的内容
}其中，response的类型有两种：字符串类型和XML文本。两种回应的不同提取如下：
responseText属性返回字符串形式的响应：
document.getElementById("myp").innerHTML=xmlhttp.responseText;如果来自服务器的响应是 XML，需要作为 XML对象进行解析，使用 responseXML：
xmlDoc=xmlhttp.responseXML;//获取服务器响应的XML文本并转换得到XMLDOM对象
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");//通过XMLDOM对象调用方法来获取XML对象中的内容
for(i=0;i<x.length;i++){
txt=txt+ x[i].childNodes[0].nodeValue+"<br>";}
document.getElementById("myDiv").innerHTML=txt;//把获取到的内容通过document对象更新到网页内容去容去相关教程：ajax视频教程
初识ajax
ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/JavaScript，而其中最核心的依赖就是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。浏览器升级之后，出现了fetch，也可以认为是ajax的一种实现。（兼容性差）
使用XMLHttpRequest对象来发送一个Ajax请求。
status：200-300表示正常状态码。
status：404表示这个文件不存在。
status：503服务器收到了请求但是内部报错了。
status：304表示这个数据是有缓存的。
readyState：存有XMLHttpRequest的状态。从0~4发生变化
只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。必须在调用open()之前指定onreadystatechange事件处理程序才能保证跨浏览器兼容性。与其他事件不同的是，这里没有向readystatechange事件处理程序中传递event对象，必须通过XHR对象本身来确定下一步该怎么做。
在接受响应之前，还可以调用abort()方法来取消异步请求，
调用这个方法之后，XHR对象会停止触发事件，而且也不在允许访问任何与响应有关的对象属性。
XMLHttpRequest标准又分为Level 1和Level 2。
1.缺点：
此属性可以设置HTTP请求的时限。与之相关的是timeout()事件，用来指定回调函数。
timeout属性表示请求在等待多少毫秒之后就终止，再给timeout设置一个数值后，如果在规定的时间内浏览器还没有接收到响应，那么就会触发timeout事件，进而会调用ontimeout事件处理程序。如果在超时终止请求之后再访问status属性，就会导致错误。为避免浏览器报告错误，可以将检查status属性的语句封装在一个try-catch语句中。
ajax直接传送FormData对象与点击submit提交网页表单的效果是一样的。
使用FormData的优点：不必明确地在XHR对象上设置请求头部，XHR能够识别传入的数据类型是FormData的实例，并配置适当的头部信息。
假定files是一个"选择文件"的表单元素（input[type="file"]），将它装入FormData对象，之后发送FormData即可实现文件的上传。
作用：指定xhr.response的数据类型。
作用：获取response数据
作用：表示发送数据。
xhr.send(data)的参数data可以是以下几种类型：
阮一峰:XMLHttpRequest Level 2使用指南
你真的会使用XMLHttpRequest么？
《javascript高级程序设计》
饥人谷前端教程
如何用Ajax实现多文件上传
jquery实现多个上传文件教程：
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
1
2
3
4
5
jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下：
1
2
3
4
5
6
7
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>
<script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>
<script src="js/swfobject.js" type="text/javascript"></script>
<link rel="external nofollow" href="css/uploadify.css" rel="stylesheet" type="text/css"/>
</script>
js函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
$(document).ready(function(){
$("#uploadify").uploadify({
'uploader':'image/uploadify.swf',//uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框
'script':'Handler1.ashx',// script：后台处理程序的相对路径
'cancelImg':'image/cancel.png',
'buttenText':'请选择文件',//浏览按钮的文本，默认值：BROWSE。
'sizeLimit':999999999,//文件大小显示
'floder':'Uploader',//上传文件存放的目录
'queueID':'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致
'queueSizeLimit': 120,//上传文件个数限制
'progressData':'speed',//上传速度显示
'auto': false,//是否自动上传
'multi': true,//是否多文件上传
//'onSelect': function(e, queueId, fileObj){
// alert("唯一标识:"+ queueId+"\r\n"+
//"文件名："+ fileObj.name+"\r\n"+
//"文件大小："+ fileObj.size+"\r\n"+
//"创建时间："+ fileObj.creationDate+"\r\n"+
//"最后修改时间："+ fileObj.modificationDate+"\r\n"+
//"文件类型："+ fileObj.type);
//}
'onQueueComplete': function(queueData){
alert("文件上传成功！");
return;
}
});
});
页面中的控件代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<form id="form1" runat="server">
<div id="fileQueue">
</div>
<div>
<p>
<input type="file" name="uploadify" id="uploadify"/>
<input id="Button1" type="button" value="上传" onclick="javascript:$('#uploadify').uploadifyUpload()"/>
<input id="Button2" type="button" value="取消" onclick="javascript:$('#uploadify').uploadifyClearQueue()"/>
</p>
</div>
</form>
</body>
函数主要参数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
$('#fileInput1').fileUpload({
'uploader':'uploader.swf',//不多讲了
'script':'/AjaxByJQuery/file.do',//处理Action
'cancelImg':'cancel.png',
'folder':'',//服务端默认保存路径
'scriptData':{'methed':'uploadFile','arg1','value1'},
//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
'multi':'true',//多文件上传开关
'fileExt':'*.xls;*.csv',//文件过滤器
'fileDesc':'.xls',//文件过滤器详解见文档
'onComplete': function(event,queueID,file,serverData,data){
//serverData为服务器端返回的字符串值
alert(serverData);
}
});
});
后台一般处理文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
using System;
using System.Collections.Generic;
using System.Linq;
using System.IO;
using System.Net;
using System.Web;
using System.Web.Services;
namespace fupload
{
///<summary>
/// Handler1的摘要说明
///</summary>
public class Handler1: IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType="text/plain";
HttpPostedFile file= context.Request.Files["Filedata"];//对客户端文件的访问
string uploadPath= HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";//服务器端文件保存路径
if(file!= null)
{
if(!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);//创建服务端文件夹
}
file.SaveAs(uploadPath+ file.FileName);//保存文件
context.Response.Write("上传成功");
}
else
{
context.Response.Write("0");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
感谢您花时间阅读本文！我们希望通过对ajax教程和ajax的工作原理是什么(附图解)的问题进行探讨，为您提供了一些有用的见解和解决方案。如果您需要更多帮助或者有其他疑问，请不要犹豫与我们联系。