ajax 详解

最新推荐文章于 2024-09-01 19:13:21 发布

wangboa123

最新推荐文章于 2024-09-01 19:13:21 发布

阅读量931

点赞数

分类专栏： web前端文章标签： Ajax JavaScript jquery 入门学习

本文链接：https://blog.csdn.net/wangboa123/article/details/8969069

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这两天工作需要用到ajax，就在w3c上面对ajax进行了全面的学习，并将学习内容记录下来。后来发现可以去api.jquery.com上面，有更详细的解释。

Ajax 基础

1. Ajax = asynchronous javascriptand xml(异步javascript和xml)

2. Ajax 历史

Ajax 是google在2005年使用与googlesuggest。到目前已经非常流行。所以上个世纪的技术要跟着IBM走。而这个世纪跟随google是没错的。所以建议大家可以开始学习go语言了（虽然我还没开始，因为没时间）。

3. 就是做网页的时候，可以异步的提交和获取结果。不用等待服务器的返回而造成的延时。也不用等整个页面提交和更换。其流程如下：

4. Ajax 是在internet编程的基础上发展而来的。主要依赖于：

a) XMLHttpRequest Object (用来与后台服务器交换数据)

b)javascript/DOM(用来展示获取的信息)

c)css (格式化显示数据)

d)xml(多数后台数据返回都是以xml格式，当然目前也有很多人会用json格式)

ajax 示例

根据w3c 官网对ajax的介绍。要学习ajax先从一个例子入手，代码如下：

<!DOCTYPE html>

<html>

<head>

function loadXMLDoc()

{

/*ajax 代码开始*/

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox,Chrome, Opera, Safari

xmlhttp=newXMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4&& xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

xmlhttp.open("GET","ajax_info.txt",true);

xmlhttp.send();

/*ajax 代码结束*/

}

</script>

</head>

<body>

<div id="myDiv"><h2>Let AJAX change thistext</h2></div>

<button type="button"οnclick="loadXMLDoc()">Change Content</button>

</body>

</html>

例子释疑，并通过例子来讲解ajax：

1. 整个过程是通过点击change content 的按钮，调用loadXMLDoc() 来改变myDiv中的字符串的值。

2. 通过ajax达到的目的是，a. 异步操作，不用等待。 b. 不用整张网页都提交。

Ajax技术介绍

Ajax的核心内容，XMLHttpRequest 对象。所有的浏览器都支持XMLHttpRequest对象，只不过在IE5和IE6中叫做ActiveXObject.我觉得可以不用理他们了。XMLHttpRequest对象就是用来和后台服务器进行交换数据的。并且可以不用该重新加载真个页面。使用过程如下：

1. 创建ajax对象。Variable = new XMLHttpRequest();在IE5和IE6中使用。Variable= new ActiveXObject(“Microsoft.XMLHTTP”);如例子所示:

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=newActiveXObject("Microsoft.XMLHTTP");

}

2. 发送request 到一个server

发送一个request，在ajax中使用的是一个open函数和send函数。如例子：

Xmlhttp.open(“GET”,”ajax_info.txt”,true);

Xmlhttp.send();

Open函数的使用如下：open（method,url,async）; method: 发送request 的类型，有”get”和”post”两种方法。url:服务器url请求。async是true和false，分别表示异步获取和同步获取。

Param1：Method的类型。Get方法比post方法快，并且大多数情况下都可以使用。不过绝大部分的开发者都习惯于用post。因为post可以满足所有要求，而get在以下三个方面会有问题。A.无法使用缓存文件的时候（更新服务器文件或者数据库）B. 数据量大的时候，post没有限制。C. 请求包括无法识别的字符和特殊安全要求。

Post方法可以使用setRequestHeader函数，来将ajax请求设置成与form相同的格式。函数不做详细介绍。

Param2： url路径，没有什么好说的。

Param3：当async==true. Javascript会直接执行。不会等待返回。当返回后通过回调函数来实现。请求例子如下（与上面例子相同）：

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
    {
   document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

当async==false. 请求会等待服务器返回，才会继续执行javascript。如果服务器在忙或者没有回复。你的前端可能就要悲剧了。

3. 接收数据。使用XMLHttpRequest 的两个属性：responseText和responseXML. Text是返回的数据是text,而xml是返回的数据是XML。使用方法例子就很好的诠释了：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4. Onreadystatechange event.就是ajax的状态改变消息。用来告知我们ajax的状态改变了，比如服务器返回数据了，赶紧处理吧。我们就可以监控到消息改变，来处理返回的数据了。这些都是XMLHttpRequest的属性。

Onreadystatechange 存储了一个函数，每次ajax请求服务器的状态改变就会自动调用该函数，这也就是传说中，ajax异步经常使用的回调函数。

Readystate 存储了XMLHttpRequest的状态，值是0-4，一共5个状态。0 是请求没有初始化，1.服务器建立连接。2. 请求已收到。3. 正在处理请求。4. 请求结束并且已经返回。

Status 只有两个值200 ,就是服务器返回ok，404就是没有找到服务器。

具体使用方法可以看例子。

Ajax练习

看完教程去http://www.w3schools.com/ajax/ajax_examples.asp官网去做个练习。就会更好了！

Jquery 使用ajax

有了javascript的ajax，并且看起来又不麻烦，为什么我们要用jquery的ajax呢？哈哈，答案就是因为不同的浏览器处理方法是不同的，比如上面例子中的IE5 IE6 等等，我们必须实现额外的代码来处理这些事情，很是恼火。而jquery项目组，把这些都处理ok了。我们不用关心这些问题，所以使用jquery。

Jquery 所有有关ajax方法：主要使用$.ajax() $.load() $.get() $.post .

$.ajax(); 执行异步ajax请求，比较常用。所有的jqueryajax 方法都会调用这个方法，这个方法经常用在其他方法不能使用的情况下。

语法：$.ajax({name:value,name:value,…})

参数: name : value

参数部分：

async true/false; 是否是异步，默认true

beforeSend(xhr) 一个再request sent之前调用的函数,使用时beforeSend:function,xhr 就是一个XMLHttpRequest对象。

cache true/false; 告诉浏览器是否需要缓存请求页。

complete(xhr,status); 当请求结束时调用的函数。（在success和error后面调用）

contentType 设置发送到后台的content的type。默认为”application/x-www-form-urlencoded”

context 上下文，制定所有回调函数所使用的”this”值

data 指定传向服务器的数据

dataFilter(data,type) 一个处理XMLHttpRequest 返回的原始数据的回调函数。

dataType 期望从服务器返回的数据类型

error(xhr,status,error) 当请求失败了，回调的函数。

global true/false 是否要触发全局ajax事件,默认是true

ifModified true/false 告诉服务器当内容改变了才返回内容，否则返回的为空值。默认false

jsonp 一个重写了json请求的字符串

jsonpCallback json请求的字符串

password 密码

processData

scriptCharset request 字符集

success(result,status,xhr)返回成功后调用的回调函数

traditional true/false 指定请求是否使用传统风格

type GET OR POST

url

username

xhr 一个创建XMLHttpRequest对象的回调函数

e.g.

<script>
$(document).ready(function(){
  $("button").click(function(){
   $.ajax({url:"demo_ajax_load.txt",beforeSend:hello(),async:false,success:function(result){
      $("div").html(result);
    }});
  });
});
functionhello(){
   alert("hello world");
}
</script>

函数第二部分：

$.ajaxPrefilter() ajax请求前调用。

$.ajaxSetup()

$.ajaxSetup({name:value, name:value, ... }) 设置ajax请求

$.ajaxTransport()

$.get()

  $.get(URL,data,function(data,status,xhr),dataType)

dataType:xml htmltext script json jsonp

$.getJSON()

  $(selector).getJSON(url,data,success(data,status,xhr))

$.getScript();

$.param() 串行化参数

e.g.
<script>
$(document).ready(function(){
  personObj=new Object();
  personObj.firstname="John";
  personObj.lastname="Doe";
  personObj.age=50;
  personObj.eyecolor="blue";
  $("button").click(function(){
    $("div").text($.param(personObj));
  });
});
</script>

结果
firstname=John&lastname=Doe&age=50&eyecolor=blue

$.post()

$(selector).post(URL,data,function(data,status,xhr),dataType)同$.get();

ajaxComplete()

<script>
$(document).ready(function(){
  $(document).ajaxStart(function(){
   $("#wait").css("display","block");
  });
  $(document).ajaxComplete(function(){
   $("#wait").css("display","none");
  });
  $("button").click(function(){
   $("#txt").load("demo_ajax_load.asp");
  });
});
</script>

ajaxError()

ajaxSend();ajax send的时候调用的函数

ajaxStart()

ajaxStop()

ajaxSuccess()

load()

serialize()

serializeArray()

参考 W3C 官网：http://www.w3schools.com/jquery/jquery_ref_ajax.asp

api官网，更详细的描述 http://api.jquery.com/