ajax学习笔记

AJAX

一、ajax- 异步 JavaScript 和 XML(极其重要)

Ajax 即“Asynchronous Javascript  And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
//加粗
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 1()
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

二、HTTP请求方式

请求方式
get
post
put
delete
head
trace	测试 调试
connect	修改连接方式
options	客户端查看服务端信息

三、ajax使用步骤

1、创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();  //高级浏览器

2、open建立连接

1、get
xhr.open('get', '1.php?username=xiaohua&sex=nan');
2、post
xhr.open('post', '1.php');
//如果是post方式必须设置请求头
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

3、send 建立连接

xhr.send();         //get
xhr.send('username=xiaohua&sex=nan');   //post

4、onreadystatechange事件监听

使用onreadystatechange 来监听ajax状态值的变化， 当readyState值改变的时候就会触发

5、readyState 查看状态值

使用readyState 查看状态 当状态值为4的时候 表示 请求已经返回

readyState可能的值	说明
0	请求未初始化 早open之前
1	请求已经初始化
2	请求发送
3	请求正在处理 交互呢 别打扰
4	请求已返回

6、status查看http状态码

status值为200时请求才算 成功返回

状态码	解释
200	成功
404	找不到指定页面
500	服务器错误
301	重定向
401	当前请求需要进行验证
403	无权限 拒绝
502	网关错误

7、接受后端返回数据的方式

• 两种方式

  responseText

  responseXML 现在基本不用了 就是 微信还用

xhr.onreadystatechange = function () {
        //console.log(xhr.readyState);
        if (xhr.readyState == 4) {
            //判断http状态码
            if (xhr.status == 200) {
                console.log(xhr.responseText);
            }
        }
    }

• 后端返回json格式字符串 需要转化成对象 在js中使用

//后端返回json格式字符串 需要转化成对象 在js中使用
1、var obj = JSON.parse(xhr.responseText);
2、var obj = eval('('+ xhr.responseText +')');
document.write(obj.name);