Ajax Jquery

时间 2019-11-09

标签 ajax jquery 栏目 Ajax 繁體版

原文原文链接

1、Ajaxjavascript

Ajax是异步的JavaScript和xmlcss

同步：一个页面会一直在等待着咱们服务器的响应（须要刷新咱们的请求页面）html

异步：无论服务器那边是否有响应都不会影响咱们的下一步操做（不须要刷新咱们的页面，可是数据是变化的）前端

同步交互：客户端发出一个请求后，须要等待服务器响应结束后，才能发出第二个请求。java

异步交互：客户端发出一个请求后，无需等待服务器响应结束，就能够发出第二个请求。（很差的是会增大服务器的访问量）web

1.步骤数组

　　a.建立一个Ajax对象 XmlHttpRequest 经过这个对象对服务器进行请求操做浏览器

　　　　xmlHttpRequest=new xmlHttpRequest（）；（大多数浏览器能够这样建立）服务器

　　　　xmlHttpRequest=new ActiveObject（）；（为了保持兼容性只有 ie5和ie6须要这样建立）app

function createXMLHttpRequest() {
        var xmlHttpRequest;//声明一个变量
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE5  IE6
            try {
                xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttpRequest;//返回xmlHttpRequest对象
    }

Ajax建立

　　b.打开连接

　　　　method: Get Post

　　　　xmlHttpRequest.open（"GET","url",true）;

　　c.向服务器发送请求的参数

　　　　xmlRequest.send(null);

　　d.调用监听的方法得到一个相应的返回值

　　　　xmlHttpRequest.onreadystatechange

　　　　等待接收服务器那边的响应

0 －（未初始化）尚未调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到所有响应内容
3 －（交互）正在解析响应内容
4 －（完成）响应内容解析完成，能够在客户端调用了

当readystate==4 && status==200就能够进行接收数据了

Ajax练习：

<script type="text/javascript">
        function createXMLHttpRequest() {
        var xmlHttpRequest;//声明一个变量
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE5  IE6
            try {
                xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttpRequest;//返回xmlHttpRequest对象
    }
    
        function fun01(){
            var xmlHttpRequest=createXMLHttpRequest();
            //打开连接
            xmlHttpRequest.open("Get","/Ajax/servlet/Demo1",true);
            xmlHttpRequest.send(null);
            xmlHttpRequest.onreadystatechange=function(){
                //开始判断咱们的响应码
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    var text=xmlHttpRequest.responseText;
                    var h1=document.getElementById("h1");
                    h1.innerHTML=text;
                    
                    
                }
                
            }
        
        }
    </script>
  </head>
  
  <body>
          <input type="button" id="btn" value="请求" onclick="fun01()">
          <h1 id="h1"></h1>
    
  </body>

Ajax页面操做

public class Demo1 extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String str="hello world";
        //经过如下语句发送到Ajax中
        response.getWriter().write(str);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        
    }

}

servlet操做

Ajax实现登录操做：

    <script type="text/javascript">
        function createXMLHttpRequest() {
        var xmlHttpRequest;//声明一个变量
        if (window.XMLHttpRequest) {
            xmlHttpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) { //IE5  IE6
            try {
                xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                }
            }
        }
        return xmlHttpRequest;//返回xmlHttpRequest对象
    }
    
        function fun01(){
            var username=document.getElementById("username")
            var xmlHttpRequest=createXMLHttpRequest();
            //打开连接
            xmlHttpRequest.open("POST","/Ajax/servlet/Demo2",true);
            //设置一个xmlHttpRequest  这个对象 设置一个tou
            xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //开始发送咱们的Ajax参数
            xmlHttpRequest.send("username="+username.value);
            //判断给Ajax的响应码
            xmlHttpRequest.onreadystatechange=function(){
                //开始判断咱们的响应码
                if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
                    var text=xmlHttpRequest.responseText;
                    var error=document.getElementById("error");
                    if(text==0){
                        error.innerHTML="正确";
                        
                    }else{
                        error.innerHTML="用户名错误";
                    }
                    
                }
                
            }
        
        }
    </script>

  </head>
  
  <body>
    <form action="">
        用户名：<input type="text" id="username" onblur="fun01()" /><span id="error"></span><br>
        密码：<input type="password"  />
        <input type="submit" value="提交"/>
    
    </form>
  </body>

页面部分

public class Demo2 extends HttpServlet {

    
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        
    }

    
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setCharacterEncoding("utf-8");
        String username=request.getParameter("username");
        if(username.equals("zhangsan")){
            response.getWriter().write("0");
        }else{
            response.getWriter().write("1");
        }
    
    }


}

servlet部分

2、Jquery

　　web前端： html css JavaScript

　　jsp：<% %>脚本 EL表达式简化咱们做用域的输出

　　ESTL：简化了咱们的Java脚本

　　Jquery：简化了咱们css javascript操做

　　$(fuction(){

　　});

　　1）设置元素及内容

　　在常规的 DOM 元素中，咱们可使用 html()和 text()方法获取内部的数据。html()方法能够获取或设置 html 内容，text()能够获取或设置文本内容。

$('#box').html(); //获取 html 内容

$('#box').text(); //获取文本内容，会自动清理 html 标签

$('#box').html('<em>www.li.cc</em>'); //设置 html 内容

$('#box').text('<em>www.li.cc</em>'); //设置文本内容，会自动转义 html 标签

注意：当咱们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而咱们期

望可以追加数据的话，须要先获取本来的数据。

$('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据

若是元素是表单的话，jQuery 提供了 val()方法进行获取或设置内部的文本数据。

$('input').val(); //获取表单内容

$('input').val('www.li.cc'); //设置表单内容

若是想设置多个选项的选定状态，好比下拉列表、单选复选框等等，能够经过数组传递操做。

$("input").val(["check1","check2", "radio1" ]); //value 值是这些的将被选定

2）添加节点

为了使页面更加智能化，有时咱们想动态的在 html 结构页面添加一个元素标签，那么在插入以前首先要作的动做就是：建立节点。

var box = $('<div id="box">节点</div>'); //建立一个节点

$('body').append(box); //将节点插入到<body>元素内部

另外一种方式：

$(box).appendTo('body');

3）移动节点

利用现有的方法进行节点的移动。

举例：

<span id="spanl">我是span标签</span>

<div id="div2">我是div</div>

function click3(){

var span = $("#spanl");

var div = $("#div2");

div.insertBefore(span);// insertAfter();

}

4）删除节点

使用jQuery提供的remove()方法，此方法是将对象从页面中删除，可是有返回对象，返回的就是删除的对象。

<span id="spanl">我是span标签</span>

<div id="div2">我是div</div>

function click4(){

var div = $("#div2").remove();

}

5）复制节点

复制节点，就是将对象重复拷贝一份，可使用jQuery提供的clone()方法，此方法就是将对象自己进行拷贝，拷贝后返回拷贝的对象。

<span onclick="f1();" >欢迎来到杭州归谷</span>

<button onclick="f2();">点击复制节点</button>

</div>

function f1(){

alert("点击了span标签");

}

function f2(){

var body1 = $("#body1");

var div1 = $("#div1");

body1.append(div1.clone());

}

6）替换节点

//替换节点

$('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素

$('<span>节点</span>').replaceAll('div'); //同上

//清空节点

$('div').empty(); //删除掉节点里的内容

7）包裹节点

jQuery 提供了一系列方法用于包裹节点，那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思。

$('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong

$('div').wrap('<strong>123</strong>'); //包裹的元素能够带内容

$('div').wrap('<strong><em></em></strong>'); //包裹多个元素

8）属性节点

l attr()方法

设置与获取属性

举例：

$(function(){

$(“span”).attr(“title”,”weclome”);

});

</script>

结果：<span title=”weclome”>abc</span>

在页面标签元素中，每一个标签元素都拥有多个属性，所以jQuery也提供了使用属性对象的方式来对元素节点进行操做，属性对象JS中的面向对象方式：{“title”:”weclome”,”id”:”sp1”}，这个方式同时也是JSON所使用的传输方式，也就是JSON串。也可使用Object对象方式来使用。

$(function(){

$(“span”).attr({“title”:”weclome”,”id”:”sp1”});

});

</script>

结果：<span title=”weclome” id=”sp1”>abc</span>

var obj = new Object();

obj.title = “welcome”;

obj.id=”sp1”;

$(“span”).attr(obj);

l removeAttr()

移除元素属性

举例：

$(function(){

$(“span”).removeAttr(“title”);

})

</script>

结果：<span>abc</span>