Jquery和AJAX

最新推荐文章于 2024-06-14 10:21:04 发布

filial piety

最新推荐文章于 2024-06-14 10:21:04 发布

阅读量326

点赞数

文章标签： ajax javascript js

本文链接：https://blog.csdn.net/showfun0406/article/details/108212742

版权

Jquery

Jquery 是一个javascript函数库，
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提示：除此之外，Jquery还提供了大量的插件。

Jquery库的下载：
目前官网无法正确的下载库了。从 jquery.com. 下载 jQuery 库
第二种方式：引用其他网页的JQUERY
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
Staticfile CDN

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

百度

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

又拍云

<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

新浪

<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

google

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

Microsoft

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
</head>

参考教程：菜鸟教程.

AJAX

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

AJAX的流程

在这里插入图片描述

XMLHttpRequest对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建XMLHttpRequest的实例对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

AJAX发送请求

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

在这里插入图片描述

async = true

通过 AJAX，JavaScript 无需等待服务器的响应，而是：在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理

服务器的响应

使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
在这里插入图片描述

AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
在这里插入图片描述
例：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

使用回调函数：在多个AJAX的环境下可减少重复代码的输出

var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari 代码
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5 代码
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}


<button type="button" onclick="myFunction()">修改内容</button>

JQuery使用AJAX

例：

$("button").click(function(){
    $.ajax({url:"demo_test.txt",success:function(result){
        $("#div1").html(result);
    }});
});

语法

$.ajax({name:value, name:value, ... })

在这里插入图片描述

自己的一个demo：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <title>index</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            doAjax();
        });
        function  doAjax() {
            $.ajax({
                url:"${pageContext.request.contextPath}/jquery/index",
                dataType : "json",
                type : "post",
                contentType:"application/json",
                async:true,
                data:JSON.stringify({id:1,name:"fwj"}),
                success:function (data) {
                  $("#id").html(data.id);
                  $("#name").html(data.name);
                },
                error:function () {
                   alert("数据发送失败！")
                }

            })
        }
    </script>
</head>
<body>
<h2>Hello World!</h2>
<p id="id"></p>
<p id="name"></p>
</body>
</html>

filial piety

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery和AJAX

JqueryJquery 是一个javascript函数库，jQuery库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities提示：除此之外，Jquery还提供了大量的插件。Jquery库的下载：目前官网无法正确的下载库了。从 jquery.com. 下载 jQuery 库第二种方式：引用其他网页的JQUERYStaticfile CDN、百度、又拍云、新浪、
复制链接

扫一扫