一、简介

　　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. css3总结之居中

    居中在前端布局上很常见,也很常用,也是最基本的技巧.居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中. 针对调整的元素不同,具体的处理方式上有些差异.这里我们先不讲绝对定位下的居中, ...

  2. Canvas绘制图片模糊

    canvas是html5的新标签,是个可以绘制图形的画布,画布的默认大小为300x150.在自定义绘制画布大小的时候有注意的问题,就是用样式来设置高度和宽度的时候 比如 <div style=& ...

  3. 如何设置树莓派的VNC开机时启动

    转载:http://www.linuxidc.com/Linux/2016-12/138793.htm 下面正式开始配置 首先 sudo nano /etc/init.d/vncserver 然后 复 ...

  4. nagios外部命令接口

    http://nagios.manubulon.com/traduction/docs14en/extcommands.html https://old.nagios.org/developerinf ...

  5. Selenium2学习（四）-- xpath定位

    前言 在上一篇简单的介绍了用工具查看目标元素的xpath地址,工具查看比较死板,不够灵活,有时候直接复制粘贴会定位不到.这个时候就需要自己手动的去写xpath了,这一篇详细讲解xpath的一些语法. ...

  6. HCNA实验OSPF基础

    1.拓扑图 方法: 1.配置接口IP 2.配置OSPF协议: [R2]ospf 100 [R2-ospf-100]area 0 [R2-ospf-100-area-0.0.0.0]network 12 ...

  7. Python模块 Socket

    一个简单的python socket编程 一.套接字 套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并 ...

  8. Python——追加学习笔记(二)

    文件处理 # 文件内移动 seek()方法可以在文件中移动文件指针到不同的位置,offset字节代表相对于某个位置偏移量,默认为0,代表从文件开头算起,1代表从当前位置算起,2代表从文件末尾算起. s ...

  9. April 2 2017 Week 14 Sunday

    You only live once, but if you do it right, once is enough. 人生只有一次,但如果活对了,一次也就够了. Maybe I am going t ...

  10. ZT onActivityResult在android中的用法

    onActivityResult在android中的用法 举例说我想要做的一个事情是,在一个主界面(主Activity)上能连接往许多不同子功能模块(子Activity上去),当子模块的事情做完之后就 ...