原生ajax请求

前些日子，忙着考驾照，没有时间对知识进行总结，感到十分惭愧啊，刚好趁现在有时间，做个知识总结，希望对各位有所帮助。

很多人都知道ajax是用来进行数据请求的，但是具体的请求方法会有些疑惑，也有很多人问我什么是数据交互是什么？在这里我将通过四个三个方面进行讲解，算是给前端新手的吧 大神可以忽略。

  • 什么是ajax
  • ajax原理是什么
  • ajax的优点与缺点
  • 如何利用ajax进行数据交互



在这里引用一张网图来作为开头部分

1.什么是 ajax

百度百科上是这样解释的：

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

2. ajax原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

　XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

　所以我们先从XMLHttpRequest讲起，来看看它的工作原理。

　首先，我们先来看看XMLHttpRequest这个对象的属性。

　　它的属性有：

　　onreadystatechange 每次状态改变所触发事件的事件处理程序。

　　responseText 从服务器进程返回数据的字符串形式。

　　responseXML 从服务器进程返回的DOM兼容的文档数据对象。

　　status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）

　　status Text 伴随状态码的字符串信息

　　readyState 对象状态值

　　　　0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）

　　　　1 (初始化) 对象已建立，尚未调用send方法

　　　　2 (发送数据) send方法已调用，但是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

　　但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间

3. ajax优点与缺点

优点：Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：

1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：1、ajax干掉了back按钮，即对浏览器后退机制的破坏。后退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的ajax技术解决了这个问题，在Gmail下面是可以后退的，但是，它也并不能改变ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）

但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，和ajax框架所要求的快速开发是相背离的。这是ajax所带来的一个非常严重的问题。

2、安全问题

技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。

3、对搜索引擎的支持比较弱。

4、破坏了程序的异常机制。至少从目前看来，像ajax.dll，ajaxpro.dll这些ajax框架是会破坏程序的异常机制的。关于这个问题，我曾经在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来我自己做了一次试验，分别采用ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

5、另外，像其他方面的一些问题，比如说违背了url和资源定位的初衷。例如，我给你一个url地址，如果采用了ajax技术，也许你在该url地址下面看到的和我在这个url地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。

4.如何进行数据交互

比如下面一个简单的例子，点击 获取按钮 获取数据 并把数据渲染到页面

html

<!DOCTYPE html>

<html>

<head>

    <title>ajax</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<p>123</p>

<div id="box">

    <select id="city"></select>

    <input type="button" value="获取" id="get" />

</div>

</body>

</html>

相应的原生js代码

<script type="text/javascript">

    var get = document.getElementById("get");

    var city = document.getElementById("city");

    get.onclick = function () {

        //创建XHR对象,主要是浏览器兼容性差异，处理兼容问题一般都是通过判断去解决。下面是一个三目运算符。

        var xhr = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");

        //设置请求URL

        var url = "./login.php";

        //设置XHR对象readyState变化时响应函数

        xhr.onreadystatechange = function () {

            //readyState是请求的状态，为4表示请求结束

            if (xhr.readyState == 4 && xhr.status == 200) {

                //responseText服务器响应的内容

                //通过eval把传来的json字符串转成对象

                var data = eval(this.responseText);

                console.log(this.responseText)

                var str = "";

                for(var i in data) {

                    str += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";

                }

                city.innerHTML = str;

            }

        };

        //打开链接，注意请求的方式是get还是post请求

        xhr.open("get", url, true);

        //发送请求

        xhr.send();

    }

</script>

我相信很多人都想知道后端是如何返回数据的，这个问题我请教了我的朋友，所以我用简单的php代码写一写

<?php

    $data = array(

        array("id" => 1,"name" => "上海"),

        array("id" => 2,"name" => "北京"),

        array("id" => 3,"name" => "广州"),

        array("id" => 4,"name" => "深圳"),

    );

echo  json_encode($data);

这里的$data就是后端返回给你的数据

到此一个完整的原生get请求就结束了 小伙伴可以试着去运转一下。遍历循环后端返回数据的过程其实就是前端渲染过程。

下面在写一个简单的post请求 小伙伴注意请求的区别

<!DOCTYPE html>

<html>

<head>

    <title>ajax</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="box">

    <input type="text" name="name" value="" id="name" />

    <input type="password" name="pwd" value="" id="pwd" />

    <input type="submit" name="sub" value="注册" id="sub" />

</div>

<p></p>

</body>

</html>

相应的原生js代码

<script type="text/javascript">

  window.onload=function(){

      var sub = document.getElementById("sub");

      sub.onclick = function () {

          var name = document.getElementById("name").value;

          var pwd = document.getElementById("pwd").value;

          var p = document.getElementsByTagName("p")[0];

          console.log(p)

          //创建XHR对象

          var xhr = new XMLHttpRequest();

          //设置请求URL

          var url = "./post.php";

          //设置XHR对象readyState变化时响应函数

          //打开链接

          xhr.open("POST", url, true);

          //设置请求头部,(这里就是post请求和get请求的区别)

          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

          //发送请求 主要是前端传递的参数

          xhr.send("name="+name+" &pwd="+pwd);

          xhr.onreadystatechange = function () {

              //readyState是请求的状态，为4表示请求结束

              if (xhr.readyState == 4 && xhr.status == 200) {

                  //responseText服务器响应的内容

                  console.log(xhr.responseText)

                  p.innerHTML=this.responseText

              }

          };

      }

  }

</script>

那么后端同样的php代码就要这样写，其实我觉得前端会一点简单的后端语言很有必要，我也就只学习了一点点php，学习的主要目的是知道前后端是如何进行数据交互的，我传给后端的参数后端是如何接收处理 并返回我想要的数据的。php大神可以忽略

<?php

$name = !empty($_POST['name']) ? trim($_POST['name']) : '没有名字';

$pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '没有密码';

echo "欢迎来到".$name."博客";

建议 可以把ajax函数封装成方法 ，方便调用。至此，我的讲解结束有啥问题可以在群里找我 欢迎各位假如 群主很热心 群里也有很多大神 。web前端开发 474471759

说说前端那些事之ajax的更多相关文章

  1. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  2. 前端技术Jquery与Ajax使用总结

    前端技术Jquery与Ajax使用总结 虽然主要是做的后端,但是由于有些时候也要写写前台的界面,因此也就学习了下Jquery和Ajax的一些知识,虽说此次写的这些对于前端大神来说有些班门弄斧的感觉,但 ...

  3. Python web前端 11 form 和 ajax

    Python web前端 11 form 和 ajax 一.打开服务器 将handlers.py.httpd.py和libs.py三个文件放入新文件夹中,双击打开httpd.py文件即可 二.ajax ...

  4. 前端笔记之服务器&Ajax（中）MySQL基础操作&PHP操作数据库&Ajax

    一.数据库基础 1.1什么是数据库? 什么是数据库? 答:就是一个很大的一个文件,只不过这个文件可以通过一些‘命令’操作数据: 增.删.改.查数据: 数据库等于持久数据和数据操作的一个统称. 数据库是 ...

  5. 前端性能利器——dynatrace ajax edition

    因为最近的工作跟性能分析有关系,所以写个小总结. 顺带推荐两个我常用的小工具: 1.文件对比工具beyond compare,非常好用,对比.修改很简单.当然我只是用的试用版本.google一下官网下 ...

  6. 通过PHP前端后台交互/通过ajax前端后台交互/php基础传输数据应用/简单的留言版/简单的注册账户/简单的登录页/

      前  言  PHP     通过上一篇博客,注册账号与登录页面--前后台数据交互  跳转转到index主页,接下来进入主页留言板功能,通过ajax向后台传输数据,同时发表留言. 具体的内容分析如下 ...

  7. 前端笔记之服务器&Ajax（下）数据请求&解决跨域&三级联动&session&堆栈

    一.请求后端的JSON数据 JSON是前后端通信的交互格式,JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. JSON是互联网各个后台与 ...

  8. 8 HTML&JS等前端知识系列之Ajax的例子

    what is ajax ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新 ...

  9. 9 HTML&JS等前端知识系列之Ajax post请求带有token向Django请求

    我们 在母板上写入这段代码: <script type="text/javascript"> // 个人定义大函数,不是重点,可以忽略 $(document).read ...

随机推荐

  1. [py模块]random&string取随机字符串

    栗子 - 取n位的随机字符串(大小写/数字) def get_random_str(len_str): import string import random letters_nums = strin ...

  2. [LeetCode] 64. Minimum Path Sum_Medium tag: Dynamic Programming

    Given a m x n grid filled with non-negative numbers, find a path from top left to bottom right which ...

  3. type Props={};

    Components Learn how to type React class components and stateless functional components with Flow Se ...

  4. Look for the Air Jordan 32 in full family sizing

    Following the release of the 'Rosso Corsa' colorway, Jordan Brand is now set to officially launch th ...

  5. jquery 的each函数

    each函数经常用到.它本身就是一个循环遍历 你可以可以break continue 但这是在for while循环中 each中我们可以这样 下面的例子是遍历 MyTable中所有的tr 第一个td ...

  6. Nature重磅：Hinton、LeCun、Bengio三巨头权威科普深度学习

    http://wallstreetcn.com/node/248376 借助深度学习,多处理层组成的计算模型可通过多层抽象来学习数据表征( representations).这些方法显著推动了语音识别 ...

  7. Python tricks(4) -- with statement

    简介 with是从2.5版本引入的一个语法. 这个语法本身是为了解决try..finally繁琐的释放各类资源(文件句柄, Lock等)的问题. 如果想在旧版本中使用这个功能, 直接引入future模 ...

  8. linux常用命令：/etc/group文件详解

    Linux /etc/group文件与/etc/passwd和/etc/shadow文件都是有关于系统管理员对用户和 用户组管理时相关的文件.linux /etc/group文件是有关于系统管理员对用 ...

  9. 由浅入深之Tensorflow(3)----数据读取之TFRecords

    转载自http://blog.csdn.net/u012759136/article/details/52232266 原文作者github地址 概述 关于Tensorflow读取数据,官网给出了三种 ...

  10. 华为C/C++笔试题&答案

    1.static有什么用途?(请至少说明两种) 1)在函数体,一个被声明为静态的变量在这一函数被调用过程中维持其值不变. 2) 在模块内(但在函数体外),一个被声明为静态的变量可以被模块内所用函数访问 ...