AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

13Ajax和JQuery

分类：Ajax作者：编程之家

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()方法

 

分享图片

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native