Ajax的初体验

Posted 2020-10-16 amandaj

一、AJAX的介绍

Ajax 即“Asynchronous Javascript And XML”（异步 javascript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

什么是AJAX？
它一门技术（多门技术结合),它可以‘悄悄’向服务器传递数据，服务器也可以‘悄悄’向客户端响应数据，最终实现得是整个页面没有重新加载，而实现页面当中局部刷新数据；

二、Asynchronous(异步)与synchronous （同步）

耗时间相对长一些的语句我们称之为‘异步语句’；Ajax、setInterval、setTimeou、Animate、node.js全都是异步语句

 

<script type="text/javascript">
 for(i in window){
     console.log(i);  
 }
 console.log(\'欢夏\');
//同步先执行for循环输出，再输出欢夏
****************************************************************
var j=0;
setInterval(function(){
    j++;
    console.log(j);
},1000);
console.log(\'欢夏\');
//异步先执行欢夏，再输出定时1s后依次累加输出数据。。。
</script>

三、JQ当中ajax的应用

前端工程师下载常用的JS文件的地址：http://cdn.code.baidu.com/  百度静态资源库

1.引用jquery.js

2.ajax在页面的应用：提示：①$.get(地址,callback);   (get,post请求都是上行请求)

案例：比如，在页面当中有一个按钮，点击这个按钮获取到服务器上面的文本的数据； 改变页面的局部数据。

 

<script type="text/javascript">
         $("button:eq(0)").click(function (argument) {
           //发起一个GET请求
           $.get("result/info.txt",function (data) {
              $("p").eq(0).html(data);
           })
         })

       //用定时器证明整个页面没有重新加载
       var  i = 0;
       setInterval(function(argument) {
             i++;
          $("h1").html(i)
       },100);
 </script>