ajax(四)

1.  我们JQuery其中有一个方法ajax方法

   其中还有五个方法，

   get();   发送get请求的通过远程 HTTP GET 请求载入信息。

   post();  发送post请求的通过远程 HTTP POST 请求载入信息。

   load();异步加载一个页面 异步载入一个页面载入远程 HTML 文件代码并插入至 DOM 中。

   getJSON();获取服务端的数据，服务端的数据必须返回json格式的数据

   getScript()这个是用来获取一段js脚本代码通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

   html 和php的编码格式要设置成一样  都在上面charset设置成utf-8

2.  get()方法和post方法

get()方法         <?php             echo $_GET['username'];            ?>

w3c可以找到

post()方法         <?php             echo $_POST['username'];            ?>

3.  load()是一个局部方法，默认是get方式提交

     load()方法提交数据给服务器，提交方式会变成post,以后如果我们使用ajax发送请求给服务器。如果说我要传递参数，而且我传递的参数中有中文，最好用post方式提交。

     因为如果是post方式提交，客户端浏览器会对这个中文进行一个编码，类似张三DF%EF%，服务器会自动进行解码就不会乱码。

  

点击可以载入一个页面

  

4. 看它是同步还是异步，点击后看有页面没有刷。

5.  访问路径，输入网址的大小写没关系

6.  getJSON();方法返回的是一个对象，它不需要我们通过eval()或者JSON.parse()去解析了，因为jQuery底层已经帮我们转过了。

7.  getScript();通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

远程载入一个js文件。

一个页面非常大的情况下不可能一次性把所有的内容一次性加载完，我们都是懒加载

需要的时候才去加载

访问的是这样的一个地址

http://www.taobao.com/day10/code/01jQuery/06GetScript.js

这里JS文件过来了，后面会有个?，?后面的是搞缓存的

浏览器有这样的一种行为，当我的在同一个页面访问的地址跟上一次访问的地址一模一样

浏览器就不去请求服务器，而是直接从缓存里面找

http://www.taobao.com/day10/code/01jQuery/06GetScript.js?_=1477016062026

保证路径的唯一，防止浏览器的缓存.

8.   登陆框案例  

因为JQ里text()是返回字符串形式的，所以不能在后面继续链式编程。

 如果是返回JQ对象形式的，可以在后面链式编程。

$(".tips p").text("手机号格式错啦");

  $(".tips p").fadeIn(1500).delay(2000).fadeOut(1500);

9.  登录框案例里的disabled的判断

10.   登录框案例serialize()

//我现在要获取到用户输入的所有数据。

//我要获取表单的所有的数据，所有的表单选项一个一个获取。

//jQuery 给我们提供了一个新的方法，有什么作用，帮助我们获取表单里面所有的数据

 var data=$("#ajaxForm").serialize();//序列化的意思，调用这方法，返回一个字符串.

console.log(data);

var data=$("#ajaxForm").serializeArray();这个方法返回的是一个数组

11.  模板 template

     1.创建一个模板，一个页面有可能发送多次请求，或者有可能多次解析，就可能创建多个模板。

      2.给模板创建一个id，到时候方便调用到对应的模板。

   3. 使用模板去解析数据。

        1:我使用的是腾讯的artTemplate.js，导入这个文件

        2:我要在页面上面去创建一个模板，就是这个模板怎么去创建的问题

        模板里面的内容是什么.

        <script type="text/template" id="templateId"></script>

        3:模板里面的内容是什么. 跟写到页面上面的内容有关系.

        4:将数据跟模板进行绑定.怎么去绑定

          //我是调用一个template的方法 这个方法是template-native.js 文件

        5:绑定之后，我还需要在模板里面解析数据，在模板里面解析数据我们使用

        新的语法解析数据.

        <% %>  这个是用来写逻辑的 ，逻辑 if ，else，for 跟写js 的逻辑一样.

        <%= %> 用来向模板里面输出的.

  

$.ajax({

   url:"01template.php",

            type:"get",

            success:function(data){

             //将数据跟模板进行绑定，怎么来绑定.

                /*

                 * 1:传递的是模板的id

                 这里要要求传进去的数据必须是一个对象.

                 * */

                //调用这个模板，template-会将这个模板里面的内容进行解析

                //解析之后返回一个字符串.我们就可以直接拿到这个字符串，向页面填充.

             var html=template("templateId",data);

             $("table").append(html);

            }

})

11. 搜索框案例    on和delegate的括号里顺序不一样

  

12.  搜索框案例   trim()去掉字符串其实和结尾的空格

13.   搜索框案例  next()是取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

14.  

    1.1 原理剖析

其本质是利用正则表达式，替换模板当中预先定义好的标签。

正则表达式exec用法

http://www.w3school.com.cn/jsref/jsref_exec_regexp.asp

1.2 流行模板引擎

BaiduTemplate：http://tangram.baidu.com/BaiduTemplate/

ArtTemplate：https://github.com/aui/artTemplate

velocity.js：https://github.com/shepherdwind/velocity.js/

Handlebars：http://handlebarsjs.com/

参考资料:

http://blog.jobbole.com/56689/

1.3 artTemplate

1、引入template-native.js

2、<% 与  %> 符号包裹起来的语句则为模板的逻辑表达式

3、<%= content %>为输出表达式

1:jQuery

        我们jQuery 帮助我们简化开发的，

        js 开发的  获取元素，操作dom ，操作样式，事件处理，执行动画，开发ajax 数据交互

        jQuery 帮助我们完成开发.

        jQuery 一堆方法帮助我们去干上面的这些事情

        ajax(),

        getJSON();

        getScript();

        get();

        post();

        load();

2:验证码的案例  

3：模板的使用

        1：引入包

        2: 创建模板，<script type="text/template" id="template">

        3: 准备模板里面的内容，模板里面的内容跟我们写到页面上面的内容有关

        4: 将数据跟模板进行绑定 template()

            1:模板id

            2：数据（必须是一个对象）

        5:在模板里面解析数据

                <%%> 用来写逻辑 js 代码 <%=%> 用来向模板里面输出，

        6:调用模板，得到模板执行之后的内容，我们将这个内容写到页面上面就可以.

4:发送一个请求给自己的服务器，使用模板去解析数据.

5:360 搜索案例

            1：操作dom 的时候注意事件冲突

            2：$("div").next().length

            3: 我们以后要知道怎么看别人的请求连接地址，参数，返回值.

6:聊天案例

          1:我们在模板里面 if 判断都可以