一、简介

　　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. How can I use Server.MapPath() from global.asax?

    引用: using System.Web.Hosting; string filePathcsv = ""; string file = ""; string ...

  2. jQuery:mouseover and Increase the Size of an Image

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. javascript:中文等字符转成unicode

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. LOJ#2552. 「CTSC2018」假面(期望 背包)

    题意 题目链接 Sol 多年以后,我终于把这题的暴力打出来了qwq 好感动啊.. 刚开始的时候想的是: 设\(f[i][j]\)表示第\(i\)轮, 第\(j\)个人血量的期望值 转移的时候若要淦这个 ...

  5. 【Linux】chmod命令

    格式chmod 权限 要修改权限的文件linux中的权限如下: -rw------- (600) -- 只有属主有读写权限. -rw-r--r-- (644) -- 只有属主有读写权限:而属组用户和其 ...

  6. matlab练习程序（单源最短路径Bellman-Ford）

    该算法可以用来解决一般(边的权值为负)的单源最短路径问题,而dijkstra只能解决权值非负的情况. 此算法使用松弛技术,对每一个顶点,逐步减少源到该顶点的路径的估计值,直到达到最短的路径. 算法运算 ...

  7. DispatchAction和ForwardAction

    添加功能的步骤:做页面——编写DAO类中的方法——编写和配置action. 如果多个action 使用一个formbean,这种事儿多发生在统一模块中,就可以用一个Action集中处理多个操作,而不要 ...

  8. centos7部署ethereum私有链

    https://github.com/ethereum/go-ethereum/wiki http://book.8btc.com/books/6/ethereum/_book/public-chai ...

  9. 扫描FTP，保存文件

    1.需求:某公司ftp服务器中一个文件夹中有30个文件(文件名字是不同的),每五分钟产生一个新的文件,同时删除这三十个文件中最早产生的文件,该文件夹中始终保持30个文件. 现在需要采集一周的数据做研究 ...

  10. Exchange 2016中的削减内容

    一.从Exchange 2013到Exchange 2016所废弃的功能. 在Exchange 2016中已经有部分Exchange 2013的功能不在提供支持. 1.体系结构 功能 注释和缓解操作 ...