关于ajax的学习笔记

ajax介绍
AJAX 的使用
模板引擎
- 传统方法
- art-template方法
- 原理（正则表达式）
ajax技术的核心xhr
还在更新

ajax介绍

ajax 全名 async javascript and XML(异步JavaScript和XML)
默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

AJAX 的使用

上面就是基本的get，post，ajax使用，不过我学到时候是用的jQuery学到，不会的还得先补补jQury

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="jquery.js"></script>
</head><body><button id="btnGET">发起不带参数请求</button><button id="btnGET1">发起带参数请求</button><button id="btnGET2">发起post请求</button><button id="btnGET3">用ajax发起get请求</button><button id="btnGET4">用ajax发起post请求</button><!--$.get(url,[data],[callback])第一个为必须要有$.post(url,[data],[callback])第一个为必须要有--><script>$(function () {$('#btnGET').on('click', function () {$.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {console.log(res);})//res是服务器响应的数据})$('#btnGET1').on('click', function () {$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {console.log(res);})//res是服务器响应的数据})$('#btnGET2').on('click', function () {$.post('http://www.liulongbin.top:3006/api/addbook', { bookname: 'fdfdf', author: 'dfdfdfdf', publisher: 'dfdfddfdfd' },function (res) {console.log(res);})})$('#btnGET3').on('click', function () {$.ajax({type:'get',//种类url:'http://www.liulongbin.top:3006/api/getbooks',data:{id:1},success:function(res){console.log(res);}})})$('#btnGET4').on('click', function () {$.ajax({type:'post',//种类url:'http://www.liulongbin.top:3006/api/addbook',data:{bookname: 'fdfdf', author: 'dfdfdfdf', publisher: 'dfdfddfdfd'},success:function(res){console.log(res);}})})})</script>
</body></html>

模板引擎

传统方法

传统方法要一个个渲染，非常麻烦（即使是用了jQury）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery.js"></script></head><body><div id="title"></div><div>姓名：<span id="name"></span></div><div>年龄：<span id="age"></span></div><div>会员：<span id="isVIP"></span></div><div>注册时间：<span id="regTime"></span></div><div>爱好：<ul id="hobby"><li>爱好1</li><li>爱好2</li></ul></div><script>//传统方法var data = {title: '<h3>用户信息</h3>',name: 'zs',age: 20,isVIP: true,regTime: new Date(),hobby: ['吃饭', '睡觉', '打豆豆']}$(function () {$('#name').html(data.name)$('#title').html(data.title)$('#age').html(data.age)$('#isVIP').html(data.isVIP)$('#regTime').html(data.regTime)var rows = []$.each(data.hobby, function (i, item) {rows.push('<li>' + item + '</li>')})$('#hobby').html(rows.join(''))})</script>
</body></html>

art-template方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./template-web.js"></script><!-- 全局会多一个函数template（） --><script src="./jquery.js"></script>
</head>
<body><div id="container"></div><script type="text/html" id="tpl_user"><!-- 把内容当html解析 --><h1>{{name}} ------ {{age}}</h1>{{@ test}}<div>{{if flag===0}}flag值为0{{else if flag===1}}flag值为1,条件输出{{/if}}</div><ul>{{each hobby}}<li>索引是：{{$index}},循环是：{{$value}} </li>{{/each}}</ul><!-- {{}}代表这以后要填充数据 --><!-- 过滤器 --><h3>{{regTime|dataFormat}}</h3><!-- 没有过滤器{{regTime}}的话就会输出"2022-09-22T04:17:02.962Z"，很丑.dataFormat名字是谁便取的  --></script><script>//定义时间过滤器template.defaults.imports.dataFormat=function(date){var y = date.getFullYear()var m=date.getMonth()+1var d=date.getDate()return y+'-'+m+'-'+d}// 定义渲染数据 var data={name:'zs',age:20,test:'<h3>测试原文输出</h3>',flag:1,hobby:['这','就','是','循','环','输','出'],regTime:new Date()}//主要函数template('tpl_user',data)$('#container').html(template('tpl_user',data))//把#tpl_user的data选出来</script>
</body>
</html>

原理（正则表达式）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// exec函数var str ='hello'var pattern = /o/var result = pattern.exec(str)//检索字符串，有就返回值，没有就nullconsole.log(result);// 分组var str1 = '<div>我是{{name}}</div>'var pattern1 = /{{([a-zA-Z]+)}}/var result1 = pattern1.exec(str1)console.log(str1)console.log(result1);//replace函数var str2 = '<div>我是{{name}}</div>' var pattern2 = /{{([a-zA-Z]+)}}/var patternResult2 = pattern2.exec(str2)console.log(patternResult2)//0：{{name}} 1：namestr2=str2.replace(patternResult2[0],patternResult2[1])//后面换掉前面的console.log(str2)//用while循环replacevar str3 = '<div>{{name}}今年{{age}}岁了</div>'var pattern3 = /{{\s*([a-zA-Z]+)\s*}}/var patternResult3 = nullwhile(patternResult3=pattern3.exec(str3)){str3 = str3.replace(patternResult3[0],patternResult3[1])}console.log(str3);</script>
</body>
</html>

ajax技术的核心xhr

ajax技术的核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。XHR为向服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>//创建xhr对象var xhr = new XMLHttpRequest()//调用open函数 类似get，指定方式和地址xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')//?id=1：查询字符串，发起带参数的get请求//调用send对象，发起请求xhr.send()//监听onreadystatechange事件xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {//请求成功固定写法console.log(xhr.responseText);//readyState 0:被创建1：open（）被调用2：send（）也被调用3：数据接收中4：结束}}//url编码和解码（汉字无法显示，要转化为英文）var xhr1 =  '黑马程序员';var xhr2 = encodeURI(xhr1);//编码：%E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98console.log(xhr2);console.log(decodeURI('%E9%BB%91%E9%A9%AC')); //解码：黑马//xhr发起post请求var xhr3 = new XMLHttpRequest()xhr3.open('POST', 'http://www.liulongbin.top:3006/api/addbook')//设置content-type属性xhr3.setRequestHeader('Content-Type','application/x-www-form-urlencoded')xhr3.send('bookname=水浒传&&author=施耐奄&publisher=上海出版社')xhr3.onreadystatechange=function(){if (xhr3.readyState === 4 && xhr3.status === 200) {console.log(xhr3.responseText);}}</script>
</body></html>

还在更新

关于ajax的学习笔记相关推荐

ajax基础学习笔记
今天学习了下ajax,简单总结一下: 1.创建XMLHttpRequest对象: xmlhttp=new XMLHttpRequest(); 2.向服务器发送请求: Get方法: xmlhttp.op ...
ajax datatype_JavaScript学习笔记（二十七） ajax及ajax封装
AJAX ajax 全名 async javascript and XML 是前后台交互的能力也就是我们客户端给服务端发送消息的工具,以及接受响应的工具是一个默认异步执行机制的功能 AJAX ...
w3c html5 ajax,Ajax教程学习笔记（W3CSchool）
第一章: 基础 1.1 是什么? AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现 ...
如何快速入门Ajax（学习笔记）—— 原生ajax、jQuery、axios
如何快速入门Ajax 1. 服务器的基本概念客户端与服务器 URL地址网页中如何请求数据资源的请求方式 2. 了解Ajax Ajax是什么 Ajax的应用场景 3. jQuery中的Ajax g ...
AJAX W3CSchool 学习笔记
1. AJAX是什么? AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML), 基于 JavaScript 和 HTTP 请求(HTTP ...
mvc中ajax的跳转,springmvc ajax 跳转的学习笔记
Spring Web MVC是什么 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,下面我们来看一篇关于springmvc ajax 跳转 ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
Python3 爬虫学习笔记 C03 【Ajax 数据爬取】
Python3 爬虫学习笔记第三章 -- [Ajax 数据爬取] 文章目录 [3.1]Ajax 简介 [3.2]解析真实地址提取 [3.1]Ajax 简介 Ajax - Asynchronous Ja ...
JavaScript学习笔记：AJAX基础
文章目录一.准备工作任务1.安装`phpstudy_pro`并启动`Apache`服务任务2.下载HBuilder X,创建HBuilder项目任务3.输入城市代码,返回城市天气预报信息 1. ...

关于ajax的学习笔记

关于ajax的学习笔记

ajax介绍

AJAX 的使用

模板引擎

传统方法

art-template方法

原理（正则表达式）

ajax技术的核心xhr

还在更新

关于ajax的学习笔记相关推荐

最新文章

热门文章