ajax学习笔记

最新推荐文章于 2024-04-28 04:05:42 发布

Pop_Rain

最新推荐文章于 2024-04-28 04:05:42 发布

阅读量314

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Pop_Rain/article/details/104919949

版权

这篇博客详细介绍了Ajax的基础知识，包括Ajax简介、工作流程、XMLHttpRequest对象的使用，以及如何通过jQuery库实现Ajax请求。此外，还探讨了Ajax与JSON数据交互的方式，并给出了在flask框架下进行前后端Json数据交互的示例。

摘要由CSDN通过智能技术生成

title: ajax学习笔记
date: 2018-03-21 16:49:52
updated: 2020-03-09 15:30:22
categories: 前端
tags:
- 前端

学习ajax是研二做项目所需

学习资料来源：慕课网的ajax全接触视频教程

Ajax简介

Ajax即异步JavaScript和XML，是一种创建交互式网页的技术，可以不重新加载整个网页的情况下更新部分网页。目前jQuery库提供多个与AJAX相关的方法。通过 jQuery AJAX方法，能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON，同时能够把这些外部数据直接载入网页被选元素中。

作为web开发人员广泛采用的JavaScript封装库之一的jQuery库，它可以极大地简化我们的JavaScript编程，缓解浏览器之间不兼容的影响，要知道在不同浏览器中进行web网页的兼容性测试也是一个不小的工作量。我们可以通过一个简单的例子发现jQuery库的优势所在：

$("p.neat").addClass("ohmy").show("slow");

通过以上简短的代码，开发者可以遍历“neat”类中所有的<p>元素，然后向其增加“ohmy”类，同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型，无需编写循环代码，无需编写复杂的动画函数，仅仅通过一行代码就能实现上述效果。jQuery的口号“最少的代码做最多的事情”果真名副其实，它把JavaScript带到了一个更高的层次。

ajax大概流程

运用html和css来实现页面，表达信息
运用XMLHttpRequest和web服务器进行数据的异步交换
运用JavaScript操作DOM，实现动态局部刷新

通过XMLHttpRequest对象发送请求

1.open(method, url, async)

method：发送请求方法 get/post
	
url：请求方地址
	
async：发送异步/同步请求，默认为true异步

2.send(string)

向服务器发送请求，string是发送传递参数，get方法参数在url中可以string为空，而post方法则需要有string参数了

e.g.

request.open("GET", "get.php", true);
request.setRequestHeader("Content-type", "apllication/x-www-form-urlencoded");
request.send("name=王二狗&sex=男");

通过XMLHttpRequest对象取得相应

请看一个较完整的XMLHttpRequest发送请求加取得响应的过程

var request = new XMLHttpRequest();
request.open("GET", "get.php", true);
request.send();
request.onreadystatechange = function()
{
	if(request.readyState===4 && request.status===200) //服务器响应完成且请求成功
	{
		//做一些事情 request.responseText
	}
}

用jQuery实现Ajax

通常不会手写js实现原生的Ajax，使用第三方js库jQuery实现Ajax，以下是一个实现LDAP网关登录的ajax显示demo

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
	
    <!--meta http-equiv="Content-Type" content="text/html; charset=utf-8"-->
    <meta http-equiv="Content-Type" content="application/json; charset=utf-8">
	
    <title>Demo<

最低0.47元/天解锁文章

Pop_Rain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax学习笔记

title: ajax学习笔记date: 2018-03-21 16:49:52updated: 2020-03-09 15:30:22categories: 前端tags:- 前端学习ajax是研二做项目所需学习资料来源：慕课网的ajax全接触视频教程Ajax简介Ajax即异步JavaScript和XML，是一种创建交互式网页的技术，可以不重新加载整个网页的情况下更新部分...
复制链接

扫一扫

专栏目录