JQuery简单学习(9)——jQuery AJAX 函数

最新推荐文章于 2024-08-15 15:27:27 发布

iteye_9300

最新推荐文章于 2024-08-15 15:27:27 发布

阅读量97

点赞数

分类专栏： Web前端-JQuery专栏文章标签： jQuery Ajax JavaScript json HTML ViewUI

Web前端-JQuery专栏专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery 拥有供 AJAX 开发的丰富函数（方法）库。

——————————————————————

什么是 AJAX？

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

——————————————————————

AJAX 和 jQuery

jQuery 提供了供 AJAX 开发的丰富函数（方法）库。

通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。

而且您可以直接把远程数据载入网页的被选 HTML 元素中！

——————————————————————

写的更少，做的更多

jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下：

$(selector).load(url,data,callback)

请使用选择器来定义要改变的 HTML 元素，使用 url 参数来指定您的数据的 web 地址。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  $('#myDiv').load('/jquery/test1.txt');
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

</body>
</html>

只有当您希望向服务器发送数据，才需要使用 data 参数。只有当您需要在完毕之后触发一个函数时，您才需要使用 callback 参数。

text1.txt

AJAX is not a programming language.

It is just a technique for creating better and more interactive web applications.

——————————————————————

Low Level AJAX

$.ajax(options) 是低层级 AJAX 函数的语法。

$.ajax 提供了比高层级函数更多的功能，但是同时也更难使用。

option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
  $("#myDiv").html(htmlobj.responseText);
  });
});
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button id="b01" type="button">Change Content</button>

</body>
</html>

——————————————————————

jQuery AJAX 请求

请求	描述
$(selector).load(url,data,callback)	把远程数据加载到被选的元素中
$.ajax(options)	把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)	使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)	使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)	使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)	加载并执行远程的 JavaScript 文件

(url) 被加载的数据的 URL（地址）

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时，所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项

iteye_9300

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery简单学习(9)——jQuery AJAX 函数

jQuery 拥有供 AJAX 开发的丰富函数（方法）库。—————————————————————— 什么是 AJAX？AJAX = Asynchronous JavaScript and XML. AJAX 是一种创建快速动态网页的技术。 AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的...
复制链接

扫一扫

专栏目录