13Ajax和JQuery

发布时间：2020-12-16 02:47:36 所属栏目：百科来源：网络整理

导读：1.Ajax 1.1是什么? “Asynchronous Javascript And XML”（异步JavaScript和XML），并不是新的技术，只是把原有的技术，整合到一起而已。 1.使用CSS和XHTML来表示。 2. 使用DOM模型来交互和动态显示。 3.使用XMLHttpRequest来和服务器进行异步通信。 4.使用

1.Ajax

1.1是什么?

“Asynchronous Javascript And XML”（异步JavaScript和XML），

并不是新的技术，只是把原有的技术，整合到一起而已。

1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

1.2有什么用?

咱们的网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

1.3数据请求 Get

1)创建对象

function ajaxFunction() {
        var xmlHttp;
        try { // Firefox,Opera 8.0+,Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }

2）发送请求

//执行get请求
    function get() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("GET","/day13Ajax/DemoServlet01",true);
        request.send();
    }

如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
    function get() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        //request.open("GET",true);
        request.open("GET","/day13Ajax/DemoServlet01?name=aa&age=18",true);
        
        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function(){
            
            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if(request.readyState == 4 && request.status == 200){
                //弹出响应的信息
                alert(request.responseText);
            }
        }
        request.send();

1.4数据请求 Post

package cn.jxufe.web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DemoServlet01 extends HttpServlet {

    public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
        System.out.println("收到了一个请求。。。");
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println("收到了一个请求。。。" + name + "=" + age);

        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("收到了请求...");
    }

    public void doPost(HttpServletRequest request,IOException {
        System.out.println("现在来了一个post请求，将要去走get的代码了。");
        doGet(request,response);
    }

}

如果不带数据

function ajaxFunction() {
        var xmlHttp;
        try { // Firefox,Safari
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            try { // Internet Explorer
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        return xmlHttp;
    }
    //执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST",true);
        request.send();
    }

带数据

    function ajaxFunction() {
        var xmlHttp;
        try { // Firefox,true);

        //如果想带数据，就写下面的两行

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=obama&age=19");
    }

//执行get请求
    function post() {
        //1. 创建xmlhttprequest 对象
        var request = ajaxFunction();

        //2. 发送请求。
        /*    
                    参数一： 请求类型  GET or  POST
                    参数二： 请求的路径
                    参数三： 是否异步， true  or false
                    
                */
        request.open("POST",true);

        //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
        request.onreadystatechange = function() {

            //前半段表示 已经能够正常处理。  再判断状态码是否是200
            if (request.readyState == 4 && request.status == 200) {
                //弹出响应的信息
                alert(request.responseText);
            }
        }

        //如果想带数据，就写下面的两行

        //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
        request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        //带数据过去  ， 在send方法里面写表单数据。 
        request.send("name=obama&age=19");

    }

2.JQuery

2.1是什么?

javascript 的代码框架。

2.2有什么用?

简化代码，提高效率。

2.3核心?

write less do more,写得更少，做的更多。

2.4load()方法

package cn.jxufe.web;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class DemoServlet02 extends HttpServlet {

    public void doGet(HttpServletRequest request,IOException {
        System.out.println("收到了请求。。。");
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("给你一份数据");
    }

    public void doPost(HttpServletRequest request,IOException {
        doGet(request,response);
    }

}

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP ‘01demo.jsp‘ starting page</title>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">
    function load() {

        //$("#aaa").val("aaa");
        //$("#aaa").html("9999999");

        //$("#aaa").load("/day16/DemoServlet02");

        //$("#text01") --- document.getElementById("text01");
        $("#aaa").load("/day13Ajax/DemoServlet02",function(responseText,statusTXT,xhr) {
            //alert("jieguo:"+responseText);
            //找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
            $("#aaa").val(responseText);
        });
    }
</script>
</head>

<body>
    <!-- <h3><a href="" onclick="load()">使用JQuery执行load方法</a></h3>  -->
    <h3>
        <input type="button" onclick="load()" value="使用JQuery执行load方法">
    </h3>

    <input type="text" id="aaa">

</body>
</html>

2.5get()方法

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!