Ajax如何工作的学习

来源：互联网发布：linux中重启oracle 编辑：程序博客网时间：2024/06/07 01:31

学习前能吐槽一下吗？

看了下博乐推荐的文章，

个别人的哈，只是个别人的文章，

首先来个前言，其次来几个图，再次来个总结。

就上推荐了，只想说这尼玛都行？这不是浪费我们的时间和流量啊。

还有就是博客名字叫神马信息学院神马提高班多少期的，

你们发博客是为了打广告吗？还是为了有猎头去找你们？目的性太强了吧。

废话不多说，开始学习并记录，如有错误请指正。

一、Ajax如何工作?

1．Jquery引用

创建以下html页:

<!doctype html>

<html>

<head>

<metacharset="utf-8">

</head>

<body>

<ahref="http://jquery.com/">jQuery</a>

<scriptsrc="jquery.js"></script>

//Your code goes here

</script>

</body>

</html>

在script元素中src属性必须指向jquery.js文件。如此文件和html不在同一目录，还需要写上路径。

2．文档准备好后执行代码

在浏览器完成文档加载后，为了确保代码的执行，很多javascript程序员在onload函数中写入要执行的代码：

window.onload = function(){

alert("welcome");

}

然而不幸的是，直到所有的图片（包括导航广告）完成加载后此代码才会执行。为了在文档准备好后尽快执行代码，jquery有一个准备事件：

$(document).ready(function()

{

//Your code goes here

});

在准备事件内部，你可以添加一个点击处理程序：

$(document).ready(function()

{

$("a").click(function(event){

alert("Thanks for visiting");

});

此时在文档中添加a元素并且导航指向http://www.baidu.com:

运行html，点击test链接，会先弹出alert框，然后继续元素a的默认行为，跳转到导航指向的www.baidu.com。

对于click事件或者更多的其他事件，在事件处理程序中你可以调用event.preventDefault()来阻止默认行为：

$(document).ready(function()

{

$("a").click(function(event){

alert("Thanksfor visiting");

event.preventDefault();

});

重新运行html，点击test链接，会发现只弹出alert框，不会在执行默认行为的导航。

3.完整的例子

下面的例子是之前讨论的关于点击处理的代码，都是直接嵌入到html的body元素中。在实践中，通常最好是将你的代码写入单独的js文件中，并且通过页面的script元素的src属性加载它：

<!doctype html>

<html>

<head>

<metacharset="utf-8">

</head>

<body>

<ahref="http://jquery.com/">jQuery</a>

<scriptsrc="jquery.js"></script>

//Your code goes here

$(document).ready(function()

{

$("a").click(function(event){

alert("Thanksfor visiting");

event.preventDefault();

});

</script>

<ahref="http://www.baidu.com">test</a>

</body>

</html>

4.新增或者移除一个html类

首先，新增一些样式信息到文档的head属性中，如下：

<style>

a.test{

font-weight:bold;

}

</style>

其次，添加addClass函数的调用：

$("a").addClass("test");

此段代码的效果是页面中所有的a元素都是字体加粗。

再次，移除所有的class，使用removeClass函数：

$("a").removeClass("test");

5.特殊效果

Jquery也提供了一些方便的效果来让你的网站能够脱颖而出。click例子如下：

$("a").click(function(event){

alert("Thanksfor visiting");

event.preventDefault();

$(this ).hide( "slow" );

});

二、回调和函数

不像其他编程语言，javascript可以让你自由传递函数并且延后执行。回调是一个函数，被作为另一个函数的参数并且再父类函数执行完才执行。回调是特殊的，因为它会等待自己的父类执行完毕才执行，在此期间，浏览器可以进行别的函数或者做其他各种各样的工作。

1.不带参数的回调

回到函数没有参数，可以这么传递它：

$.get("mypage.html",mycallback);

当get完成获取mypage.html页面，才会执行mycallback函数。

2.带参数的回调

执行带参数的回调是个棘手的事情。

举个错误的例子：

$.get("mypage.html",mycallback(param1,param2));

上面例子的错误是因为直接调用了带参数的mycallback，并且返回了mycallback的返回值作为get函数的第二个参数。实际上，我们要传递mycallback()函数给第二个参数，而不是传递mycallback(param1,param2)的返回值。

那么，如何传递带参数的mycallback()函数?

正确的做法是，使用匿名函数，延迟执行带参数的函数。匿名函数只执行一件事，调用带参数的mycallback函数。

$.get("mypage.html",function(){

mycallback(param1,param2);

});

当get已经完成取得mypage.html页面，会执行调用mycallback(param1,param2)的匿名函数。

关于带参数的回调函数，我理解的是其实就是传递的函数的地址。

0 0