原生Ajax(xhr)深刻理解

　　　　　　　　Ajax 　　Asynchronous JavaScript and XML　异步的JavaScript和XML

 

　　ajax经过与后台服务器进行少许的数据交换，ajax可使页面实现异步更新，即不须要从新加载整个页面

 

1.建立XMLHttpRequest对象

　　全部现代浏览器

var xhr = new XMLhttpRequest();

　　老版本的 ie

var xhr = new ActiveXObect("Micrsoft.XMLHTTP");

2.向服务器发送请求

xhr.open(method,url,async)    //method 可选 GET / POST
                          //url  文件在服务器上的位置
                          //async true（异步）,false(同步)

 

xhr.send(string)    //仅适用于POST请求    将请求发送到服务器

 

GET与POST优缺点

与POST相比GET更简单，更快，而且大部分状况都能用

然而 如下状况中要用POST请求

    ·没法使用缓存文件（更新服务器上的文件或数据库）
    ·向服务器发送大量数据（POST没有数据量限制）
    ·发送包含位置字符的用于输入时 POST 比GET跟稳定
　　 .get参数在url中展现，利于分享、收藏 

简单的GET请求　ajax是在服务器端的请求 因此本地模拟一个　

　　我使用的是node　　切换到本地对应目录

$ npm install --global http-server　　//node包管理工具下载

$ http-server　　　　　　　　　　//运行http-server

服务器挂起了

html

  <span>你好</span>
  <button onclick="lodMessage()">change</button>

js

      var lodMessage = () => {
        console.log('发送请求');
        var xhr = new XMLHttpRequest();
        console.log(xhr.readyState);
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState);
          console.log(xhr.status);
          if (xhr.readyState == 4 && xhr.status <=200 && xhr.status <= 300 || xhr == 304) {
            document.getElementsByTagName('span')[0].innerHTML = xhr.responseText;
          }
          
        }
        xhr.open('GET', 'http://127.0.0.1:8080/demo.php', true);
        xhr.send();
      }

demo.php

<?php
  echo 'changed';
?>

 

这样打开本地的 localhost:8080/01-get.html　　便可   点击按钮 就能够显示在 demo.php里面请求回来的数据

 点击前

点击后

 

 

当我改变demo.php里的内容

 

<?php
  echo 'changedededededed';
?>

 

 

再次刷新页面后再次点击 button 发送请求  指望获得改变后的demo.php的值　　

　　

然而并无的到更新后的数据　　（这种状况 不是每次都会碰到  ，  可是的确碰到了）

 

这是由于  两次请求，浏览器将数据缓存下来了

 　　

解决办法　(让请求不同)　

　　改变 xhr.open 　给url加一个惟一的id

 

这样 浏览器就不会使用缓存的数据 

 

GET时传一些数据

　　

 

POST请求

　　更换open方法的method

xhr.open('POST','http://127.0.0.1:8080/demo.php',true)

　　添加请求头规定想要发送的数据类型

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

　　http的content-type还有好多种  http://tool.oschina.net/commons

　　send方法中添加数据

xhr.send('name=weibin&age=12');

 

xhr.status与xhr.readyState的值以及其意义

//xhr.status
1**　　　　　　　　  消息
2**        　　    访问成功
3**               重定向  　　301永久重定向　　302临时重定向　　304重定向到磁盘（缓存）
4**               客户端错误
500               服务端错误
502               错误的访问
503               服务器不可用
6++　　　　　　　　　自行拓展

//xhr.readyState

0    请求未初始化
1    服务器连接简历
2    发送send请求
3    内容下载
4    完成

ajax 默认是不能请求跨域的资源的 　　

　　　　请求跨域资源的方法 　　关于jsonp (基本用不到)     

 　　　　http默认是容许跨域访问的，而咱们不能访问是由于浏览器的限制，例如简单的get、post方法使用curl中执行就是能够得。

　　　　能够经过修改http的请求头中 white-head、content-type、method 等参数 实现多种ajax方法、头、内容的跨域访问。