一、简介

　　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. em和px区别

    附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...

  2. canvas玩转微信红包

    CSS3相关属性: <!DOCTYPE html> <html> <head lang='en'> <meta charset='UTF-8'/> &l ...

  3. String字符串操作

    char chars[] ={'a','b','c'}; String s = new String(chars); int len = s.length();//字符串长度 System.out.p ...

  4. Ubuntu16.04安装Docker1.12+开发实例+hello world+web应用容器

    本次主要是详细记录Docker1.12在Ubuntu16.04上的安装过程,创建Docker组(避免每次敲命令都需要sudo),Docker常用的基本命令的总结,在容器中运行Hello world,以 ...

  5. SharePoint 2013 - Callout

    1. 没有OOTB的方法对Callout进行修改,Callout可以使用在以下范围: Document Library Assert Library Images Library Pages Libr ...

  6. 关于httpclient的终结

    End of life 关于Commons HttpClient项目现在已经结束,不再开发.它已经被HttpClient和HttpCore模块中的ApacheHttpComponents项目所取代,新 ...

  7. python 初识

    一.Python介绍 Python简介 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  8. 安装adobe，路径My Pictures或卷无效。请重新输入。

    问题:安装adobe reader时,路径My Pictures或卷无效.请重新输入.我的光驱是D盘.因为是在虚拟机下安装的xp系统. 解决办法: GHOST WINXP2 My Pictures一般 ...

  9. 深度剖析hdfs原理

    大数据底层技术的三大基石起源于Google在2006年之前的三篇论文GFS.Map-Reduce. Bigtable,其中GFS.Map-Reduce技术直接支持了Apache Hadoop项目的诞生 ...

  10. 二、Python安装扩展库

    第一步:推荐easy_install工具 下载地址:https://pypi.python.org/pypi/setuptools 下载"ez_setup.py"文件; 通过运行c ...