一、简介

　　Ajax（Asynchronous JavaScript and XML）。一般都写为Ajax。

Ajax是与服务器交换数组并更新部分网页的艺术。最初的使用时2005中Google Suggest 搜索框输入时，返回搜索建议。

　　WEB的运行原理：一次HTTP请求对应一个页面。如果要让用户留在当前页面中，同时发出新的HTTP请求。就必须用JavaScript发送这个请求。接收到数据再用Javascript更新页面。用户就感觉自己仍然停留在当前页面，但数据却可以不断的更新。

二、创建方法

　　通过XMLHttpRequest对象，开发人员可以在应用程序的任何地方，初始化Http请求。

var xmlhttp;

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

三、示例、

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>shuiguo</title>

    </head>

    <body>

        <div>

            <button>APPLE</button>

            <button>CHERRIES</button>

            <button>BANANAS</button>

        </div>

        <div id="target">

            Press a button

        </div>

        <script>

            let button = document.getElementsByTagName("button");//获取按钮

            for (let i = 0; i < button.length; i++){

                button[i].onclick = handleButtonPress; //遍历按钮

            }

            function handleButtonPress(e) {

                let httpRequest = new XMLHttpRequest(); //创建XMLHttpRequest对象

                httpRequest.onreadystatechange = handleResponse; //onreadystatechange的值为；

                httpRequest.open("GET", e.target.innerHTML+ ".html",true);//获取交互数据就是按钮的HTML文件

                httpRequest.send();

            }

            function handleResponse(e) {

                if (e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){//当请求触发

                    document.getElementById("target").innerHTML = e.target.responseText;//返回给前台的数据

                }

            }

        </script>

    </body>

</html>

交互文件的格式

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>香蕉</title>

        <style> p{

            color: red;

        }</style>

    </head>

    <body>

        <p>

            香蕉 ；

        </p>

    </body>

</html>

运行结果

四、使用Ajax

关于GET和post.GET请求适用于安全的交互行为，就是那些你可以反复的发起而不会带来副作用的请求。POST请求适用于不安全的交互行为，意思是每一个请求都会导致服务器端产生某种变化，而重复的请求可能会带来安全问题。

在这个例子中没有任何对服务器的交互所以send无参数可用。

XMLHttpRequset对象定义的事件

这些事件大多数在请求的某一时间点上触发。readystachange 和progress不同，可以多次触发来提供更新。

XMLHttpRequset readyState属性。

值                                     数值          说明

UNSENT                               0           已创建xmlhttprequest对象

OPENED                               1           已调用open方法

HEADERS_REXEIVED             2           已收到服务器响应标头

LOADING                              3           已收到服务器响应

DONE                                   4           响应已完成或者失败

HTTP状态码

五、处理Ajax错误

①错误类型；第一类错误是从XMLHttpRequest对象的角度看问题：某些因素阻止了请求发送到服务器，。例如DNS无法解析主机名，连接请被拒绝，或者URL无效。

第二类错误是，从应用程序看，成功响应，但是响应的内容不是你想要的。例如。请求的URL不在。

try catch没开始学。周末写吧。

Ajax异步交互的更多相关文章

  1. AJAX 异步交互基本总结

    AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...

  2. spring mvc 和ajax异步交互完整实例

    Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...

  3. Ajax异步交互基础

    1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...

  4. Ajax异步交互 [异步对象连接服务器]

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>X ...

  5. ajax 异步交互

    <script>     $(function(){         $("#sub").click(function () {             $.ajax( ...

  6. 实现AJAX的异步交互的步骤

    <input type="button" value="异步请求"id="btn"> <script> 实现ajax ...

  7. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  8. 原生Ajax实现异步交互

    实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...

  9. 关于AJAX 的交互模型、交互流程及代码示范

    AJAX  = 异步JavaScript + XML. 它是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...

随机推荐

  1. Nginx管理(二)

    一.Nginx虚拟主机 一个web服务器软件默认情况下只能发布一个web,因为一个web分享出去需要三个条件(IP.Port.Domain name) Nginx虚拟主机实现一个web服务器软件发布多 ...

  2. CSS3 常用新特性总结

    更新于(2017.07.07)会总结项目中比较常用的有些CSS属性 伪类选择器 E:first-of-type: 匹配同类型中的第一个同级兄弟元素E E:last-of-type: 匹配同类型中的最后 ...

  3. jquery mobile 自定义图标

    Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标,为了减少下载的大小,Jquery Mobile包含的是的白色的图标sprite图片,并自动在图标后添加一个半透明的黑圈以确保在任 ...

  4. wxpython Menus and toolbars

    Menus and toolbars A common part in a GUI application is a menubar. A menubar consists of objects ca ...

  5. greenplum导数据

    Greenplum and Hadoop HDFS integration Step 1: Install Java on greenplum Step 2: Set JAVA and HADOOP ...

  6. 怎么在overflow-y:sroll的情况下 隐藏滚动条

    当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果.  我们不希望出现滚动条,也不希望超出去的内容被放逐,就要保留鼠标滚动的 ...

  7. Android（java）学习笔记40：WindowManager 中LayoutParams的各种属性

    1. WindowManager 中LayoutParams的各种属性 WindowManager.LayoutParams 是 WindowManager 接口的嵌套类(内部类):它继承于 View ...

  8. DisparityCostVolumeEstimator.cpp

    #include "DisparityCostVolumeEstimator.hpp" #include "DisparityCostVolume.hpp" # ...

  9. c#用链表存储并读取配置文件（代码部分）

    //读取配置参数 private void loadcofig() { //List<param> camra1 = new List<param>(); List<st ...

  10. ueditor1.2.6图片被压缩的解决办法

    修改文件路径: ueditor\dialogs\image\image.html 修改数值: