这是我参与「第四届青训营 」笔记创作活动的第1天
前言
由于之前对于XML和AJAX相关的基础知识比较薄弱,特意借青训营的机会好好整理不熟悉的部分。
1 JQuery简介
- Jquery是一个轻量级的JavaScript库
- Jquery对Javascript中的许多事情进行了简化,如AJAX和DOM操作
1.1 Jquery基础语法
基础语法是: $(selector).action()
- $ 美元符号定义 jQuery
- (selector) 选择符"查询"和"查找" HTML 元素
- action() 执行 jQuery 对元素的操作
为了预防在文档完全被加载之前就运行了JQuery代码,将所有 jQuery 函数放入一个 document ready 函数中:
$(document).ready(function(){
// 输入jQuery方法
});
//可以将document ready事件简写为:
${function(){
//输入jQuery方法
}
}- XML 标签没有被预定义。您需要*自行定义标签*。
2XML
- XML 指可扩展标记语言(EXtensible Markup Language)
- XML 标签没有被预定义,需要自行定义标签。
- XML 的功能是传输数据,而非显示数据
- XML 是 W3C 的推荐标准
2.1实体引用
在 XML 中只有 < 和 & 是严格非法的,但是将 > 替换为
>也是一个好习惯。
3 AJAX与XML
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
3.1 AJAX XMLHttpRequest 对象
创建XMLHttpRequest对象:
*variable* = new XMLHttpRequest();
出于安全原因,现代浏览器不允许跨域访问。也就是说网页和它试图加载的XML文件必须位于同一服务器上。
3.1.1 XMLHttpRequest 对象方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 创建新的XMLHttpRequest对象 |
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回标题信息 |
| getResponseHeader() | 返回特定的标题信息 |
| open(method,url,async,user,psw) | 指定请求 方法:请求类型 GET 或 POST url:文件位置 async:true(异步)或 false(同步) user:可选用户名 psw:可选密码 |
| send() | 将请求发送到服务器 用于获取请求 |
| send(string) | 将请求发送到服务器。 用于POST请求 |
| setRequestHeader() | 将标签/值对添加到要发送的标头 |
3.1.2 XMLHttpRequest 对象属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义readyState属性更改时要调用的函数 |
| readyState | 保存XMLHttpRequest的状态。 0: 请求未初始化 1: 已建立服务器连接 2: 已收到请求 3: 正在处理请求 4: 请求已完成,响应已准备就绪 |
| responseText | 以字符串形式返回响应数据 |
| responseXML | 以XML数据的形式返回响应数据 |
| status | 返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" |
| statusText | 返回状态文本(例如确定或未找到) |
客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 **get **和 post 请求。
-
get 请求通常用于获取服务端资源(向服务器要资源)
例如:根据 URL 地址,从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等 -
post 请求通常用于向服务器提交数据(往服务器发送资源)
例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作