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”