学习笔记④ (AJAX)

1 . AJAX的简介

• 全称： Asynchronous Javascript And XML
• 异步JavaScript 和XML
• 浏览器向服务器发送异步请求
• 最大优势：无刷新获取数据
• 不是一门汇编语言

2 . XML简介

• 可扩展标记语言
• 被设计用来传输和存储数据
• xml和html类似，不同的是html都是预定义标签，而xml中没有预定义标签，全都是自定义标签，用来表示一些数据
• 现在被JSON取代

3.AJAX的特点

3.1 AJAX的优点

（1） 无需页面刷新而与服务端通信
（2） 允许根据用户事件来更新部分页面内容

事件：鼠标事件 、 键盘事件 、 表单事件 、 文档事件等

3.2 AJAX的缺点

（1） 没有浏览历史，不能后退
（2） 存在跨域问题
（3） SEO不友好（SEO：搜索引擎优化）

4 . HTTP协议（超文本传输协议）

4.1 请求报文

//格式与参数
请求行 	(GET/ POST)  /  url   / HTTP版本
请求头 	 Host ，Cookie , Content-Type......
空行
请求体
	GET：为空
	POST：可以不为空

4.2 响应报文

//格式与参数
行      协议版本    相应状态码   相应状态字符串
头      Content-Type:
		Content-length:
		.......
空行
体

5.jQuery对Ajax操作进行封装：

• 最底层：$.ajax();
• 第二层：load(), $ .get() , $ .post()
• 第三层：$ .getScript()和 $.getJSON()

5.1. $.ajax()

• type ：类型，“POST”或“GET（默认）”
• url : 发送请求的地址
• data :是一个对象，连同请求发送到服务器的数据
• dataType： 预期服务器返回数据类型，如果不指定，jQuery将自动根据HTTP包MIME信息来智能判断，一般我们采用json格式
• success : 是一个方法，请求成功获得的回调函数
• error: 是一个方法，请求失败时调用此函数，传入XMLHttpRequest对象

5.2. jQuery load() 方法

• load() 方法从服务器加载数据，并把返回的数据放入被选元素中(载入远程 HTML 文件代码并插入至 DOM 中)
• 语法：$(selector).load(URL,data,callback);

• URL（必须） ：规定加载的 URL
• data： 规定与请求一同发送的查询字符串键/值对集合
• callback： 是 load() 方法完成后所执行的函数名称

5.3. jQuery $.get() 方法

• 语法：$.get(URL,callback);

• URL: 规定希望请求的 URL（必须）
• callback : 请求成功后所执行的函数名

5.4. jQuery $.post() 方法

• 语法： $.post(URL,data,callback);

5.5. $.getScript()

• getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript
• 语法： $.getJSON(url,[data],[callback])

5.6. $.getJSON()

• 采用的数据类型为json，因此在调用时需要使用jsonData.id方式（jsonData的属性）