ajax基础

叮叮车
73 阅读4分钟

概念：

同步交互：客户端向服务器端发送请求，直到服务器端进行响应的全过程，用户是不能做其他事情的（等）
    典型：网址请求、表单请求 - 都是属于同步交互

异步交互：客户端向服务器端发送请求，直到服务器端进行响应的全过程，用户是可以做其他事情的（不等）
    典型：ajax请求

ajax：asynchronous javascript and xml：直译：异步的javascript和xml

不严格的定义：页面不会完全的刷新，只会导致局部页面发生改变

其实我们很早之前就已经见过一个异步技术了：

  1. 定时器 - 定时器里面的内容再耗时也不会卡主后续代码 - 做特效
  2. ajax - 目的：在不刷新页面的情况下也可以和服务器端进行交互沟通，【可以将服务器端的数据放到前端】

如何使用：4个固定步骤

	1、创建ajax的核心对象XMLHttpRequest - 简称XHR对象
		var xhr=new XMLHttpRequest();

	2、建立和服务器端的连接
		xhr.open("GET/POST","xx.php");

	3、向服务器发送请求
		xhr.send("key=value&key=value&...");
		特殊：
		1、如果是GET请求，send方法会失效，但是还不能省略不写，必须写为xhr.send(null)，请求消息放到url?后面
			xhr.open("GET","xx.php?key=value&...");
			xhr.send(null);

		2、如果是POST请求，send方法可用，但是需要在之前设置请求头部
			xhr.open("POST","xx.php");
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send("key=value&...");

	4、设置状态事件监听
		xhr.onreadystatechange=()=>{
			if(xhr.readyState==4&&xhr.status==200){
				xhr.responseText;//response：响应。接收到服务器的响应：php放在页面上的一切东西 - 难在拿到东西你要干什么
			}
		}

百度地图、高德地图 - gps定位：

如何使用：

  1. 打开百度搜索百度地图开放平台

  2. 注册/登录

  3. 拉到最下面申请注册为百度开发者

  4. 控制台->应用管理->我的应用->创建应用

  5. 创建应用时：注意：1、应用类型：浏览器端 2、白名单：*

  6. 恭喜你获得了密钥ak

  7. 鼠标放到导航条上开发文档->javascript API->示例DEMO->挑选你喜欢的地图，可以将多个喜欢的汇总为一个 切记： 1、密钥要用上 2、看清楚版本有的版本不能汇总： 老版本：未加gl版 - 几乎被淘汰了 新版本：gl版

XML数据格式：

	1、面试题：HTML、XHTML、DHTML、XML分别是什么？
		HTML - 网页
		XHTML - 更严格的网页
		DHTML - 动态的网页，不是新技术，也不是新概念，只是现有技术的整合（HTML+CSS+JS(dom)），导致我们的网页在离线时也具有动态特效
		XML - 配置文件|数据格式 - 已经被淘汰了：x - 未知，ml - markup language 标记语言，未知的标记语言
			它没有提供过任何预定义标签，所有的标签由你自定义，不在乎漂不漂亮

如何使用：

		1、创建一个xx.xml文件	
		2、写入文档声明
			<?xml version="1.0" encoding="utf-8"?>
			version - 版本号：目前只有1.0和1.1，但是1.1升级的拉胯，所以没人使用，而且学完过后以后不需要再次学习，因为它再也不会更新了
			encoding - 设置中文编码
			必须出现在第一个行第一列
		3、在下方写入一个根标签，注意必须是一个双标签：只有双标签才可以包裹住其他内容，而且只能有一个
		4、里面其余标签你随意，恭喜你学完了

其实当初后端会把数据库的数据取出来，整理为XML数据格式

*前端开发人员：

  1. 依然使用ajax去获取
  2. url写为"xx.xml";
  3. 不要使用xhr.responseText; 使用xhr.responseXML;可以当做DOM来处理（你学的叫做核心DOM - API繁琐）

一个好的数据格式能够极大的提升程序员的开发效率

JSON数据格式：

javascript object notation：js对象表示法，本身就是js的一部分，只不过独立出来，各大主流语言都支持的一种轻量级【文本】数据

作用：类似于XML，都是一个数据格式，更简洁、更快、更容易解析

1、认识了哪些叫做JSON数据（JSON字符串）：

  • '[1,2,3,4,5]'
  • '{"name":"代老湿","age":18}'
  • '[{},{},{},{}]'
  • '{"names":[],"ages":[],"salaies":[]}'

以上四种写法都是JSON字符串

2、PHP如何穿衣服：echo JSON_encode($arr); - 数据转为了JSON字符串

Node.js的语法和javascript几乎相同：如何穿衣服：JSON.stringify(arr);

3、前端依然使用ajax获取数据，xhr.responseText得到服务器端响应的的数据,如何脱衣服：

  • eval("("+jsonTxt+")");
  • JSON.parse(jsonTxt);

客户端存储技术：

1、查询字符串：缺点：只适合双页面传输，多页面不方便，解析复杂

2、cookie：缺点：大小有限制2kb，保存解析非常麻烦，用户可以禁用cookie！

3、webStorage：几乎没有缺点：html5带来的新概念，老IE不支持。优点：大小有限制8mb，使用极其简单

	分为两大类：
		1、localStorage - 本地级：永久存在的
		2、sessionStorage - 会话级：浏览器一旦关闭，数据就会死亡

			保存：xxxStorage.属性名=值;
			读取：xxxStorage.属性名
			删除：xxxStorage.removeItem("属性名");
			清空：xxxStorage.clear();
avatar
文章
阅读
粉丝