Ajax也是前端必备技能了,学习任何语言,都需要以理论为基础的大量实践才能真正学会,之前学了Ajax很多遍,因为缺乏大量实践,总是会忘。所以不实践是失败之母。。。当然理论基础也很重要啦,今天谈谈我对Ajax的基础认知。

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

作用:  传统的数据提交,大多是通过表单的形式,填写数据,点击提交,数据就会被提交到后端,这种提交往往会跳转页面,存在很多问题,比如我们填完信息点了提交,就会跳到后端页面,后端页面进行验证,发现用户已经注册了,这个时候又会跳转到表单填写页面,让我们回去重新填,那之前填的全没了,肯定体验很不好。而Ajax就是能做到私底下去请求页面传递数据,然后返回给我们请求的结果,我们前端接收到这个结果,根据结果可以做一些操作,比如提示错误信息,整个页面是一直处在表单填写界面,从未跳转。想想我们平常注册帐号的时候,是不是没跳转界面就知道自己哪填的不对了,就是ajax在起作用。

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

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

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

  1. var oBtn = document.getElementById('btn');
  2. oBtn.onclick = function(){
  3. var xhr = new XMLHttpRequest(); //创建Ajax对象
  4. xhr.open('get','1.txt',true); //设置请求信息
  5. xhr.send(); //提交请求
  6. //等待服务器返回内容
  7. xhr.onreadystatechange = function() {
  8. if ( xhr.readyState == 4 ) { //判断当前的请求状态,4代表后端已经处理完成
  9. alert( xhr.responseText ); //弹出内容
  10. }
  11. }
  12. }

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

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

  1. var xhr = new XMLHttpRequest(); //创建Ajax对象

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

需要说明的是,这个对象实际是存在兼容问题的,IE6以下没有这个对象的,所以是获取不到数据的,IE6以下用的实际是一个插件的方式:

  1. ActiveXObject(‘Microsoft.XMLHTTP’)
  2. //ActiveXObject: IE6下插件的总称,包含很多插件
  3. //Microsoft.XMLHTTP:具体某个插件的名字

所以我们需要对上面做一个兼容性的处理:

  1. var xhr = null;
  2. if(window.XMLHttpRequest){ //加window是因为如果直接判断IE下不存在的东西会报错,加了window,就是在判断一个属性是否存在,这样就不会报错了(当然我们都知道所有的东西都在window对象下,所以这样判断是有效的)
  3. xhr = new XMLHttpRequest();
  4. }else{
  5. xhr = new ActiveXObject(‘Microsoft.XMLHTTP’);
  6. }

接着看

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

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

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

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

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

我们来具体看个get方式请求的栗子,并且了解前后端到底是怎么交互的。

栗子需求:建立HTML页面,PHP页面,填入数据,点击提交,然后输出我们输入的内容。

HTML页面:

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

1.get.php(如果不了解PHP语言,大概看下面的注释简单知道干啥就行了)

  1. <?php
  2. header('content-type:text/html;charset="utf-8"'); //设置编码格式,以及文档类型
  3. error_reporting(0);
  4.  
  5. $username = $_GET['username'];//获取get请求的方式得到填写的数据 这里$_GET里的参数是要和前端标签中的name属性是保持一致的
  6. $age = $_GET['age'];
  7.  
  8. 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页面:

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

1.get.php

  1. <?php
  2. header('content-type:text/html;charset="utf-8"');
  3. error_reporting(0);
  4. $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后面代码才能执行,这就是一种异步。

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

还拿上面的举个栗子

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

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

但是如果用同步的话,我们后面那些不依赖这些前面代码的代码也没办法执行,体验就不好了,所以我们选择用异步,而对于这些依赖前面代码执行的代码,我们就进行判断

  1. if ( xhr.readyState == 4 )就是判断如果数据响应到了,收到了,再弹出内容。(如果我们不判断,按照异步的原理,就会立马弹出来,获取数据需要时间,因为实际还没获取到数据,所以会弹出空,怕误解,所以这里我再强调下).
  2.  

由于Ajax内容比较多,所以会分开来讲,我们下节博客继续分析,我是沐晴,不见不散

Ajax基础详解1的更多相关文章

  1. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  2. Ajax基础详解2

    沐晴又来更新啦,话说我们上回讲到Ajax中open方法的第三个参数异步和同步的问题,今天呢,就来继续往下唠,先接着上回的代码 var oBtn = document.getElementById('b ...

  3. $.ajax()方法详解 ajax之async属性 【原创】详细案例解剖——浅谈Redis缓存的常用5种方式(String,Hash,List,set,SetSorted )

    $.ajax()方法详解   jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...

  4. Dom探索之基础详解

    认识DOM DOM级别 注::DOM 0级标准实际并不存在,只是历史坐标系的一个参照点而已,具体的说,它指IE4.0和Netscape Navigator4.0最初支持的DHTML. 节点类型 注:1 ...

  5. AJAX请求详解 同步异步 GET和POST

    AJAX请求详解 同步异步 GET和POST 上一篇博文(http://www.cnblogs.com/mengdd/p/4191941.html)介绍了AJAX的概念和基本使用,附有一个小例子,下面 ...

  6. $.ajax()常用方法详解(推荐)

    AJAX 是一种与服务器交换数据的技术,可以在补充在整个页面的情况下更新网页的一部分.接下来通过本文给大家介绍ajax一些常用方法,大家有需要可以一起学习. 1.url: 要求为String类型的参数 ...

  7. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  8. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. jquery中的ajax方法详解

    定义和用法ajax() 方法通过 HTTP 请求加载远程数据.该方法是 jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XML ...

随机推荐

  1. Effective Java 69 Prefer concurrency utilities to wait and notify

    Principle Use the higher-level concurrency utilities instead of wait and notify for easiness. Use Co ...

  2. MVC如何在单独的类库中添加区域

    今天要做一个将区域放到单独的类库中的程序,其实就是多加几个引用的问题,但是我比较喜欢这种设计结构,因为这样的话可以把单独的应用逻辑放在单独的类库中处理,项目看起来更清晰分明,所以写了这个随笔. 首先创 ...

  3. 【nginx】配置文件的优化

    1.编译安装过程优化 在编译Nginx时,默认以debug模式进行,而在debug模式下会插入很多跟踪和ASSERT之类的信息,编译完成后,一个Nginx要有好几兆字节.在编译前取消Nginx的deb ...

  4. 图解SQL的inner join、left join、right join、full outer join、union、union all的区别

    转自:http://blog.csdn.net/jz20110918/article/details/41806611 假设我们有两张表.Table A 是左边的表.Table B 是右边的表.其各有 ...

  5. Ajax详解及其案例分析------如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表

    本节主要内容预览: 1 获得Ajax对象 2 使用Ajax对象发送GET请求 3 使用Ajax对象发送POST请求 4 使用Ajax校验用户名 5 POST请求时的乱码处理 6 GET请求时的乱码处理 ...

  6. LVS四种实现模式详解

    一.集群cluster 当后端服务器承受不住访问的压力,提高服务器性能的解决方案会极大增加成本时,人们提出了横向扩展的解决方案.增加一台或几台服务器,提供相同的服务,通过前段分发器将访问量均匀的分配到 ...

  7. 在Asp.Net Core中添加区域的简单实现

    使用区域,可以有效的对业务进行隔离,各种业务及分工可以更灵活.在Asp.Net Core中启用区域也是极简单的. 使用步骤: 1.在 Startup.cs 中添加区域的路由: app.UseMvc(r ...

  8. USACO section1.2 Transformation

    /* ID: vincent63 LANG: C TASK: transform */ #include <stdio.h> #include<stdlib.h> #inclu ...

  9. HFSS 边界条件

    Ansoft HFSS求解就是对微分形式的麦克斯韦方程采取有限元方法进行数值求解,在场矢量和导数是都单值.有界而且沿空间连续分布的假设下,这些方程才可以使用.在边界和场 源处,场是不连续的,场的导数变 ...

  10. Remote Displayer for Android

    应用截图: 作者:sunrain_hjb      QQ:2157825357                 Email:sunrain_hjb@aliyun.com 版本:1.0.188     ...