2019.5.18-优快云博客

本文链接：https://blog.youkuaiyun.com/tearw/article/details/90319503

本文主要介绍了jQuery AJAX相关知识。AJAX可在不重载整个网页的情况下，通过后台加载数据并显示，如谷歌地图等案例。重点讲解了jQuery - AJAX的load()方法，包括其功能、语法，还给出自动获取练习及获取外部信息有无回调函数的代码示例。

总结：

JavaScript___05.14

一、jQuery AJAX

1.什么是AJAX

1.AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），简单来说，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。 2.应用案例：谷歌地图、优酷视频、人人网等

2.jQuery-AJAX load()方法

1.从服务器加载数据，并把数据放入我们指定的元素中 2.语法 $(selector).load(URL.data.callback)

必须的URL参数规定加载的地址
可选的data参数规定与请求一同发送的查询字符串（键值对集合）

3.自动获取练习

代码如下：

1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>Title</title> 6. <script src="jquery-1.9.1.min.js"></script> 7. <script> 8. $(document).ready(function(){ 9. $("#div1").mouseover(function(){ 10. url="demo1.txt"; 11. $("#div1").load(url) 12. }) 13. $("#div1").mouseout(function(){ 14. $("#div1").html(""); 15. }) 16. //1、如下是获取外部文本 17. $("#button1").click(function(){ 18. url="demo1.txt"; 19. $("#div1").load(url) 20. }) 21. }) 22. </script> 23. </head> 24. <body> 25. <div id="div1" style="background-color:rgb(204,204,153);width:200px;height:100px;"></div> 26. <button id="button1">获取外部文本</button> 27. </body> 28. </html>

四.获取外部信息有无回调函数

代码如下：

1. //3、如下是获取外部信息有无回调函数 2. $("#button3").click(function(){ 3. $("#div1").load("demo1.txt ",function(responseTxt,statusTxt){ 4. if(statusTxt == "success"){ 5. alert("外部内容加载成功") 6. } 7. if(statusTxt == "error"){ 8. alert("错误信息") 9. } 10. }) 11. })

知识点：

①在load()方法中callback是可选的参数，callback（回调函数）规定当load方法完成后所需要执行的回调函数，callback回调函数的参数设置

②responseTxt:包含回调成功后的返回结果内容(响应类型)

③statusTxt:回调状态

④eg:首先load()方法完成后显示一个提示框，如果load()方法换行成功，则显示“外部内容加载成功”，如果失败，显示“错误信息”

⑤node:成功-“success” 失败-“error”