Ajax异步交互
一、简介
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 响应已完成或者失败
五、处理Ajax错误
①错误类型；第一类错误是从XMLHttpRequest对象的角度看问题：某些因素阻止了请求发送到服务器，。例如DNS无法解析主机名，连接请被拒绝，或者URL无效。
第二类错误是，从应用程序看，成功响应，但是响应的内容不是你想要的。例如。请求的URL不在。
try catch没开始学。周末写吧。
Ajax异步交互的更多相关文章
- AJAX 异步交互基本总结
AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...
- spring mvc 和ajax异步交互完整实例
Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...
- Ajax异步交互基础
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
- Ajax异步交互 [异步对象连接服务器]
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>X ...
- ajax 异步交互
<script> $(function(){ $("#sub").click(function () { $.ajax( ...
- 实现AJAX的异步交互的步骤
<input type="button" value="异步请求"id="btn"> <script> 实现ajax ...
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 原生Ajax实现异步交互
实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象 function getXhr(){ var xhr = null; if(window.XMLH ...
- 关于AJAX 的交互模型、交互流程及代码示范
AJAX = 异步JavaScript + XML. 它是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...
随机推荐
- phpmyadmin杂记
看着坑爹的教程..我老是报错我也很无奈啊 以下几项必改 $cfg['blowfish_secret'] = ' ';//这里引号内是空格,实际上可以是任意内容, $cfg['Servers'][$i] ...
- html中通过移除空格的方法来解决浏览器上的留白间距该怎么理解？
今天在切图的时候,碰到一个兼容性的问题,很幸运最后通过张金鑫老师的文章解决了这个问题!但在阅读张老师文章的时候,我有个地方不明白,在网上查了下也没找到我想要的答案,后来自己想了半天好像是这么回事,现在 ...
- canvas-菜鸟版画布时钟
这是以前自己练习写的一个画布时钟 <!DOCTYPE html><html lang="en"> <head> <meta charset ...
- SharePoint 2013 - Add-ins
1. App Web & Host Web The special website to which the app is deployed is called an App Web. The ...
- 《ArcGIS Runtime SDK for Android开发笔记》——（15）、要素绘制Drawtools3.0工具DEMO
1.前言 移动GIS项目开发中点线面的要素绘制及编辑是最常用的操作,在ArcGIS Runtime SDK for iOS 自带AGSSketchLayer类可以帮助用户快速实现要素的绘制,图形编辑. ...
- IOS Google语音识别更新啦！！！
旧版本的API: —Google提供了一个在线语音识别的API接口,通过该API可以进行中文.英文等语言的识别. API地址:http://www.google.com/speech-api ...
- Consul在linux系统， 群集实战
Consul作为微服务的服务注册与发现组件,是非常重要的一部分 目前想用Consul作为配置管理的统一管理 准备两台机器 11.11.11.1011.11.11.20 下载consul linux版 ...
- HCNA修改OSPF基准带宽
1.拓扑图 2.R1配置ip开启OSPF The device is running! <Huawei>sysEnter system view, return user view wit ...
- Orchard Core 使用工作流处理审批和创建内容项
译自:http://www.ideliverable.com/blog/orchard-core-workflows-walkthrough-content-approval 转载请注明出处, 原文地 ...
- CRM订单状态的Open, In process和Completed这些条目是从哪里来的
Service Order的状态字段里的这些字段从哪里带出来的?我们可能会想当然的认为是从后台配的Status profile里带出来的.事实并非如此. 这个transaction type根本没有分 ...