zoukankan      html  css  js  c++  java
  • ajax

    1.Ajax技术合成  异步的JavaScript and  xml  css 资源
     
    2.异步请求和局部刷新。
      同步请求:等待第一个请求响应数据回发回来后,再发送第二次请求。
      $.ajax(是否异步)

    3.Ajax怎么运作?
      原生态Ajax核心对象:
          判定当前的浏览器引擎有没有哪个对象? 能力检查 (情况1:IE  和非IE  chrome和FireFox)
          1.构建核心对象   XmlHttpRequest  xhr;


          2.设置他的属性和方法
            xhr.open("post","/FirstServlet",true);
        xhr.onreadystatechange=funtion(){
            if(xhr.readyState==4&&xhr.status==200){
            }
        
        };
            
            你要想发送Post请求,必须得有Content-Type
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(get:null/post:data);

    4.使用jQuery实现Ajax
        function newAjax() {
                $.ajax({
                    url:"/FirstServlet",
                    type:"POST",
                    data:{"uname":$("[name=uname]").val()},
                    async:true,
                    success:function (data) {
                        $("#msg").html(data);
                    }
                });
            }

    5.认识JSON
      是一种数据传输格式:  
      JavaScript  Object  Notation  Js对象标记  XML Extendsible  Makeup Language  可扩展性标记语言   
      HTML:Hyper  Text  Markup Language 超文本标记语言
       var data={"name":"微冷的雨","age":20,"address":"河南安阳"};

       var data=[{"name":"微冷的雨","age":20,"address":"北京上地"},
                    {"name":"微热的翔","age":22,"address":"河南郑州"}]

       var userArray = [ {
                    "id" : 2,
                    "name" : "admin",
                    "pwd" : "123"
                }, {
                    "id" : 3,
                    "name" : "詹姆斯",
                    "pwd" : "11111"
                }, {
                    "id" : 4,
                    "name" : "梅西",
                    "pwd" : "6666"
                } ];

        var $table = $("<table border='1'></table>")
                    //在table内部追加一行  tr
                    .append("<tr><td>ID</td><td>用户名</td><td>密码</td></tr>");
                    $.each(userArray,function(i,dom) {
                        $table.append("<tr><td>" + dom.id + "</td><td>"
                            + dom.name + "</td><td>"
                            + dom.pwd + "</td></tr>");
                    });



       $("#objectArrayDiv").append($table);
    6.$.get()
                   $.get('/FirstServlet',{"uname":$("[name=uname]").val()},function (data) {
                   $("#msg").html(data);
                   });


                /* $.get('/FirstServlet',{"uname":$("[name=uname]").val()},function (data) {
                       $("#msg").html(data);
                   });*/
                    //post请求
                 /*  $.post('/FirstServlet',{"uname":$("[name=uname]").val()},function (data) {
                       $("#msg").html(data);
                   });*/

                 //getJSON方法
                   $.get('/FirstServlet',{"uname":$("[name=uname]").val()},function (data) {
                       alert(typeof data);
                       $("#msg").html(data);
                   });

              $("#msg").load('/FirstServlet',{"uname":$("[name=uname]").val()});

                 设置了dataType;“json”  服务器端返回的数据格式是json对象,不是json串。

    7.$( selector ) 选择器
      $("#msg"):Jquery对象
      $(dom) dom转jquery对象的方案
      $("<div></div>") 内存中构建一个节点

  • 相关阅读:
    PAT 1006 Sign In and Sign Out
    Winform 自定义程序安装向导(可用于数据库升级等)
    Winform 数据库连接配置界面
    SQLServer禁用、启用外键约束
    sp_MSforeachtable使用方法
    【.NET】使用HtmlAgilityPack抓取网页数据
    SQL:bat批处理多个.sql文件
    C#:数据库通用访问类 SqlHelper
    C#:最简洁强大的代码生成器
    SQL 分组后拼接字符串
  • 原文地址:https://www.cnblogs.com/yfyfyff/p/7665758.html
Copyright © 2011-2022 走看看