### 编写 Ajax
- 创建 Ajax 对象
- `ActiveXObject("Microsoft.XMLHTTP)`
- `XMLHttpRequest()`
- 笔记:变量是 `Window` 的属性
- 使用未定义的变量 —— 报错
- 使用未定义的属性 —— `undefined`
- 用 `window.XMLHttpRequest` 返回真则是 chrome FF IE7,
- 用 `window.ActiveXObject("Microsoft.XMLHTTP")` 返回真则是 IE6
- 连接服务器
- `open(方法,文件名,异步传输)`
- *method*:请求的类型;`GET` 或 `POST` ,**必须大写**
- *url*:文件在服务器上的位置,GET 请求要避免缓存,请向 URL 添加一个唯一的 ID
- *async*:true(异步)或 false(同步)
- 发送请求
- `send()`
- *string*:仅用于 POST 请求
- 接收返回值
- 请求状态监控
- `onreadystatechange` 事件
- `readyState` 属性:请求状态
- `0: 未初始化 ` 还没有调用 `open()` 方法
- `1: 开始载入 ` 已调用 `send()` 方法,正在发送请求
- `2: 载入完成 ` `send()` 发送完成,已收到全部响应内容
- `3: 解析 ` 正在解析响应内容
- `4: 完成` 响应内容解析完成,可以在客户端调用了
- `status` 属性( http 状态码):请求结果,`200: 成功`
- `responseText` 获得字符串形式的响应数据
```js
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
```
> ## POST 请求
>
> 一个简单 POST 请求:
>
> 实例
>
> ```js
> xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send();
> ```
>
> 如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
>
> 实例
>
> ```js
> xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");
> ```
>
> | 方法 | 描述 |
> | :------------------------------- | :----------------------------------------------------------- |
> | setRequestHeader(*header,value*) | 向请求添加 HTTP 头。 *header*: 规定头的名称 *value*: 规定头的值 |
- 代码:
```HTML
<html>
<head>
<script type="text/javascript">
function Ajax(url, suc, err) {
var oAjax = '';
if (window.XMLHttpRequest) {
// chrome FF IE9
oAjax = new XMLHttpRequest;
} else if (window.ActiveXObject) {
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
if (oAjax != '') {
oAjax.onreadystatechange = state_change;
oAjax.open('get', url, true);
oAjax.send();
} else {
err();
}
function state_change() {
if (oAjax.readyState === 4) {
// 完成
if (oAjax.status === 200) {
// 成功
if (suc) {
suc(oAjax.responseText);
} else {
return oAjax.responseText;
}
} else if (oAjax.status === 404){
console.log('url错误或不存在');
} else if (err){
err();
}
} else if (oAjax.readyState === 0){
console.log('未初始化');
} else if (oAjax.readyState === 1){
console.log('正在发送请求');
} else if (oAjax.readyState === 2){
console.log('处理请求中');
} else if (oAjax.readyState === 3){
console.log('正在解析');
}
}
}
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
Ajax('/api/blog/list', function (str) {
// 使用返回数据
console.log('成功')
document.getElementById('T1').innerHTML = str;
})
}
}
</script>
</head>
<body>
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button id="btn">Click</button>
</body>
</html>
```
- 前言
- 初探 JavaScript 魅力
- JavsScript 是什么
- 第一个 JS 特效:鼠标提示框
- 网页换肤和 if 判断
- 函数传参
- 循环 while 和 for
- 导航栏选项卡
- JS 简易日历
- JavaScript 基础
- JavaScript 组成
- 变量类型
- 变量类型转换
- 变量的作用域和闭包
- 命名规范
- 运算符
- 程序流程控制
- JSON
- 深入 JavaScript
- 函数返回值
- 函数传参与行间样式
- 数组基础操作
- 定时器的使用
- 定时器的作用
- 数码时钟
- Date 对象其它方法
- 延时提示框
- 无缝滚动
- DOM基础应用
- DOM 基础
- DOM 节点
- 操作元素属性
- DOM 元素灵活查找
- DOM 操作应用
- 创建、插入和删除元素
- 文档碎片
- DOM操作应用高级
- 表格标签
- 表格应用
- 表单应用
- JS 运动基础
- 运动基础
- 运动框架及应用
- 缓冲运动
- 运动的停止条件
- JS 运动应用
- 多物体运动框架
- 任意值运动框架
- 仿 Flash 图片展示
- JS 运动中级
- 链式运动框架
- 完美运动框架
- 运动框架总结
- 运动框架应用
- JS事件基础
- Event 对象和事件
- 鼠标事件
- 键盘事件
- JS 事件中级
- 默认事件
- 拖拽
- JS 事件高级应用
- 事件绑定
- 高级拖拽
- 自定义滚动条
- Ajax 基础
- Ajax 是什么
- 使用 Ajax
- Ajax 原理
- Ajax 中级
- 编写 Ajax
- Ajax 数据
- JS 面对对象基础
- 面对对象是什么
- JS 中的面对对象
- 第一个面对对象的程序
- 工厂方式
- 原型:Prototype
- 面对对象编程方式
- JS 面对对象实例
- 面对对象的选项卡
- JS 面对对象高级
- Json 方式的面向对象
- 拖拽和继承
- 使用继承
- 系统对象
- BOM 应用
- BOM 基础
- 尺寸及坐标
- 常用方法和事件
- COOKIE 基础与应用
- 什么是 cookie
- 使用 cookie
- JS 中的正则表达式
- 正则表达式基础
- 字符串与正则配合
- 字符串
- 量词
- 常用正则例子
- JS Template 模板引擎
- 特性
- 语法
- 实例
- 表达式和运算符分类
- 主要表达式
- 左表达式
- 自增和自减
- 一元运算符
- 算术运算符
- 关系运算符
- 相等运算符
- 位移运算符
- 二进制位运算符
- 二元逻辑运算符
- 条件(三元)运算符
- 赋值运算符