Ajax基础详解1

         Ajax也是前端必备技能了，学习任何语言，都须要以理论为基础的大量实践才能真正学会，以前学了Ajax不少遍，由于缺少大量实践，老是会忘。因此不实践是失败之母。。。固然理论基础也很重要啦，今天谈谈我对Ajax的基础认知。

定义：全称：Asynchronous JavaScript and XML（用异步的形式的JavaScript去操做XML)  用来传输进行数据交互 其实就是拿数据发数据。

做用：  传统的数据提交，大可能是经过表单的形式，填写数据，点击提交，数据就会被提交到后端，这种提交每每会跳转页面，存在不少问题，好比咱们填完信息点了提交，就会跳到后端页面，后端页面进行验证，发现用户已经注册了，这个时候又会跳转到表单填写页面，让咱们回去从新填，那以前填的全没了，确定体验很很差。而Ajax就是能作到私底下去请求页面传递数据，而后返回给咱们请求的结果，咱们前端接收到这个结果，根据结果能够作一些操做，好比提示错误信息，整个页面是一直处在表单填写界面，从未跳转。想一想咱们日常注册账号的时候，是否是没跳转界面就知道本身哪填的不对了，就是ajax在起做用。

下面咱们先不解析具体的原理，先来看一个大体的实现过程。

首先，你得知道是把代码放在服务器下运行的，打开的时候不能用本地的地址，要用localhost/。。这种形式才是在服务下访问的。要是这不了解的话，能够先自行百度下。我日常都是用的xampp第三方集成的服务器，比较轻便。

需求：新建一个文字1.txt,随便输入什么内容，新建HTML页面，点击HTML页面里的按钮发生请求获取1.txt里面的内容。这里只看js代码。

var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = new XMLHttpRequest();  //建立Ajax对象 xhr.open('get','1.txt',true);    //设置请求信息 xhr.send(); //提交请求

        //等待服务器返回内容
         xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { //判断当前的请求状态，4表明后端已经处理完成 alert( xhr.responseText ); //弹出内容 } } } 

当点击按钮的时候，你就会发现弹出了1.txt里面的内容。

咱们来具体解析一下这个步骤

 var xhr = new XMLHttpRequest(); //建立Ajax对象

咱们要用Ajax获取数据，首先呢，要建立一个Ajax对象，就跟你想获取系统时间要建立一个时间对象是一个道理。对象的名称就是 XMLHttpRequest()，建立好以后咱们就能够用对象下的方法属性进行数据交互了。

须要说明的是，这个对象实际是存在兼容问题的，IE6如下没有这个对象的，因此是获取不到数据的，IE6如下用的实际是一个插件的方式：

 ActiveXObject(‘Microsoft.XMLHTTP’) //ActiveXObject: IE6下插件的总称，包含不少插件 //Microsoft.XMLHTTP：具体某个插件的名字

因此咱们须要对上面作一个兼容性的处理：

var xhr = null; if(window.XMLHttpRequest){ //加window是由于若是直接判断IE下不存在的东西会报错，加了window，就是在判断一个属性是否存在，这样就不会报错了（固然咱们都知道全部的东西都在window对象下，因此这样判断是有效的）
    xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP’); }

接着看

xhr.open('get','1.txt',true); //设置请求信息
Open方法：有三个参数 一、提交方式 Form-method(get/post) 二、提交地址 Form-action 三、是否异步，是为(true)

首先讲提交方式：get/post 这两种的区别。

这里咱们不用ajax的方式，先直接经过传统的表单提交数据来分析。

传统的表单提交就是在表单里面设置提交的一些参数，用户的输入信息点击提交，会跳到指定的后台页面。

表单form标签的属性：
action：提交到哪里 默认是当前页面
method：提交方式 默认是Get
enctype: 提交的数据格式，默认是application/x-www-form-urlencoded

咱们来具体看个get方式请求的栗子，而且了解先后端究竟是怎么交互的。

栗子需求：创建HTML页面，PHP页面，填入数据，点击提交，而后输出咱们输入的内容。

HTML页面：

<form action="1.get.php">
    <input type="text" name="username">
    <input type="text" name="age">
    <input type="submit" value="按钮" />
</form>

1.get.php（若是不了解PHP语言，大概看下面的注释简单知道干啥就好了）

<?php header('content-type:text/html;charset="utf-8"'); //设置编码格式，以及文档类型 error_reporting(0); $username = $_GET['username'];//获取get请求的方式获得填写的数据 这里$_GET里的参数是要和前端标签中的name属性是保持一致的
$age = $_GET['age']; echo "你的名字：{$username}，年龄：{$age}"; //输出内容

观察实验结果，当点击按钮，页面会跳到1.get.php页面，把内容输出。而且观察上面的地址栏，会发现咱们输入的信息被放在了地址栏上。

    这里就要讲一下网络请求方面的知识，当咱们输入网址获取内容，整个过程是怎么发生的呢？浏览器又作了什么？

    首先要讲一下HTTP协议，虽然表面上咱们经过代码来实现了交互，实际上在网络请求的时候内部是经过各类协议达到了想要的结果，这个协议呢就是一种规范，由于网络上存在太多不一样类型的东西，要想互相能交流传递就须要一种共同遵照的约定，才能理解。而咱们这里就用到了HTTP协议，但愿有机会的人已经要去学习一下计算机网络方面的东西，这里推荐一本书《图解HTTP》，是我看过最清晰易懂的书了，其实有一个系列，均可以看看。

   因此当咱们输入网址的时候，浏览器根据HTTP协议生成一个请求报文发送给服务端，而后服务端收到这个报文就会进行处理而后回应给咱们一个响应报文。这两个报文里面含有请求和回应的各类信息。其实从代码角度来看，请求报文是经过前端代码能够设置的，好比什么时候发送发送给谁，响应报文就是后端代码处理后返回的一个结果。

请求报文里通常包括请求的方法（GRT/POST），请求的URL或传递的数据等。

响应报文里有请求状态码，好比200表示请求成功，还有返回的一些数据等。

具体咱们不说太多，能够本身私下多了解，，主要来讲的是GET请求方式和POST的不一样在请求报文上的体现。

其实整个GET请求过程以下，假设后台语言是PHP。

1 输入用户信息，点击提交，跳到指定的后台的页面.

2 GET方式会把用户输入的数据名称和对应的值以这样的格式(username=value&age=value )串连起来，放在指定的后台页面的地址栏的问号（？）后面。而且把请求数据放到了请求报文里。

3 后台的代码 ，能够经过PHP语言中的$_GET方法，获取到请求报文的用户信息，用$_GET['username']; $_GET['age']方法获取到值;而后就能够进行一系列逻辑处理。

由此，咱们能够知道GET方式：

1 把数据名称和对应的值串连(username=value&age=value ),而后把数据放到指定页面的url地址？后面，而后数据会被加入到请求报文中发送给后端。因此咱们彻底能够在后台页面的地址栏上手动更改信息，相应的请求报文就会发生变化，GET方式请求的信息在请求报文里也看获得，因此get方式是不安全的，通常不用来提交比较敏感数据，大部分是获取数据的时候用。

2 url有长度限制，因此GET请求的方式有数据量限制，每一个浏览器都不一样，因此不要用这种方式传递过长的数据。否则会被截取，致使传递数据不完整。

3 只能传递字符串类型 

 

由于是用户名是中文的时候，会默认编码了，因此username后面是乱码。

下面来看看POST方式，一样是这样的需求

HTML页面：

<form action="1.get.php" method="post">
    <input type="text" name="username">
    <input type="text" name="age">
    <input type="submit" value="按钮" />
</form>

1.get.php

<?php header('content-type:text/html;charset="utf-8"'); error_reporting(0); $username = $_POST['username'];//不一样的请求方式方法不一样，$_POST方法专门用来获取POST方式请求的数据
 $age = $_POST['age'];
 echo "你的名字：{$username}，年龄：{$age}";

咱们看到输出信息页面，地址栏上没有用户信息了，咱们打开开发者工具，找到网络就能够看到咱们的请求报文，点进去就是具体内容，看上面的第二个图，能够看到一些请求信息，有请求的编码格式，还有请求地址等，POST请求的数据实际是在请求报文的实体里进行传递的，因此更安全些，可是咱们发现咱们经过控制台仍是能够看到提交的信息，因此其实它也没有很安全，通常仍是要对输入的信息进行加密。

咱们看第三张图，能够看到请求的数据，上面的实际上是浏览器已经按照某种格式输入的信息，下面的源代码才是实际传递的信息，能够看到串连的格式和GET请求是同样的，用户名后面的乱码是编码了，当传递的是中文的时候，才会进行这样的编码。

由此咱们能够知道

Post请求
1 数据的串连格式和Get请求是同样的。
2 经过请求报文的信息，经过浏览器内部传输，不会表如今网址上。

3 传输数据量 Post理论上无限

4 能够传递多种数据类型（文本类型，二进制）。

关于Open方法的第一个参数提交方式就讲到这里，第二个地址先简单了解，下面来看第三个参数关于异步和同步。

同步：就是一种阻塞模式，好比代码var a =1 ; alert(a);这就是一种同步，必须执行了第一种var a =1，你才会弹出a的值。

缺点：通常当你后面的代码须要用到前面的东西的时候 适合用同步，若是两句代码彻底无关，那用同步就没有必要了。

异步：就是一种非阻塞模式，最明显的例子，就是定时器，当咱们写了一个30s后执行的定时器的时候，在30S内定时器后面的代码是能够执行的，而不是过了30s后面代码才能执行，这就是一种异步。

缺点：当你后面的代码须要用到前面的东西的时候 若是用异步，那么后面的代码会在前面还没加载好就出来，可能会有问题。
解决：当你后面的代码须要用到前面的东西的时候，能够用条件判断来决定这些代码的执行，若是条件达成了就能够执行。

还拿上面的举个栗子

var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject(‘Microsoft.XMLHTTP’); } xhr.open('get','1.txt',true); //设置请求信息 
 xhr.send();//提交请求
 //等待服务器返回内容 这里后面会具体讲，大概就是监听服务器的状态，先简单了解便可
  xhr.onreadystatechange = function() { if ( xhr.readyState == 4 ) { //若是内容响应成功，并解析完成 alert( xhr.responseText ); //弹出内容 
 } } } 

在上面的代码中xhr.send()提交请求是须要时间的，因此必需要等到必定时间提交成功后，咱们后面的才能正确获取到内容，因此这就是后面的代码正确执行，依赖于前面，

可是若是用同步的话，咱们后面那些不依赖这些前面代码的代码也没办法执行，体验就很差了，因此咱们选择用异步，而对于这些依赖前面代码执行的代码，咱们就进行判断

if ( xhr.readyState == 4 )就是判断若是数据响应到了，收到了，再弹出内容。（若是咱们不判断，按照异步的原理，就会立马弹出来，获取数据须要时间，由于实际还没获取到数据，因此会弹出空，怕误解，因此这里我再强调下）.

因为Ajax内容比较多，因此会分开来说，咱们下节博客继续分析，我是沐晴，不见不散