原生js学习笔记8——Ajax基础

什么是Ajax

不刷新页面的情况下从服务器获取、提交数据的一种数据交互方式。

Ajax使用步骤

1\创建Ajax对象

var httpRequest = new XMLHttpRequset可以创建一个Ajax请求对象。

注意：浏览器的兼容问题

IE6以及之前的IE不支持上边的创建爱你方法，这些版本的浏览器并没有集成Ajax，而是当做一个插件来处理,所以在创建时需要做兼容性处理:

if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest;   
} else{
    // IE5\6使用的是ActiveXObject对象
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

2\配置Ajax的请求地址

使用Ajax的open方法来配置地址

open方法的三个参数：

1. 数据提交方式
2. 地址
3. 是否异步请求

示例xmlHttp.open ("GET", “http://127.0.0.1/index.php”, "true")

数据的提交方式分为GET和POST两种方式

**GET: **

1. 把提交的数据的名称、对应的值使用“？”拼接在url之后,如果有多个数据，则使用“&”连接
2. 参数的长度有限制，不能太长（由于各个浏览器对长度要求不一样，所以不详细说），否则会被截取
3. 只能传递字符串类型的参数。

POST：

1. 把提交的数据封装在http头字段中。
2. 参数长度可以在服务器端调整，因此理论上任意长度的参数都可以传递。
3. 可以传递任意类型的数据

异步与同步：

异步（true）：不会阻塞代码，ajax的工作未完成，继续执行后边的代码

同步(false)：阻塞代码，ajax的工作未完成，则等待ajax完成后在执行后边代码当后续的代码需要用到前边的请求数据时，需要用同步，否则用异步请求。

3\发送请求

xmlHttp对象的send方法发送上边的请求: 示例xmlHttp.send()。

4\接收服务器返回的数据

responseText:ajax请求返回的内容被存放在这个属性里
readyState:ajax的工作状态
on readystate change:当readyState发生改变时，会触发
status：该属性代表服务器的工作状态（也就是http状态码）：200表示请求成功

readyState返回码含义

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化

1: 服务器连接已建立

2: 请求已接收

3: 请求处理中

4: 请求已完成，且响应已就绪

示例1：使用Ajax请求服务器中的一个新网页资源

    
        
        
        
    
    
        点击加载
        
        

    

示例2：使用Ajax请求一个带参数的URL

综合示例：使用Ajax加载新闻标题:
前端代码

    
        
        
        
        
        
    
    
        
        获取新闻
        
        

            
        
    

服务端代码

 '楼继伟财长:简单提高个税起征点不公平'),
        array('title' => '[银行]回应国有银行经营持续恶化:不良贷款率的确在温和上升 今后还会上涨'),
        array('title' => '[改革]称财税改革进度低于预期 营增改今年完成 难点在于纳税人多比较复杂'),
        array('title' => '[债务]回应地方债增速加大:赤字率可适当提高 称借钱可买房 不能用于吃饭'),
        array('title' => '[相关]个人综合税方案已经提交 谈"劳动合同法保护企业不足":财政部不修法'),

    );
    
    echo json_encode($news);
    
    
    
?>

GET请求注意问题！！：

1. Ajax的缓存问题：如果反复请求同一个URL，则第二次请求的内容是从浏览器缓存中拿到的，并不是真正服务器端的内容，所以为了避免服务器内容更改，但是客户端从缓存中取数据，拿不到新数据，我们可以在get请求中的参数末端添加一个随机数、或时间戳作为参数:'http://127.0.0.1?username=zhangsan&password=12345&'+ new Date()

2. Ajax的乱码问题：如果请求参数中有中文，则会因为编码不统一导致后台认不出中文参数的情况，所以我们需要把中文参数进行编码：'http://127.0.0.1?username='+encodeURI('全政')+'&password=123456&'+ new Date()

POST请求注意问题！！

1. POST请求的参数不是拼接在url之后，而是放在send()方法里：send('username=zhangsan&password=12345&'+ new Date()')

2. 请求编码问题：form表单提交时，默认的编码是：enctype="application/x-www-form-urlencoded" 而Ajax请求需要手动设置编码方式，在setRequestHeader('content-type', 'pplication/x-www-form-urlencoded')设置。

form提交数据示例：