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 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...
随机推荐
- vue打包（npm run build）时错误记录
vue项目打包时,报错如下: 问题分析:semver.js报错,版本不正确,解决办法,打包时忽略版本检查 解决办法:
- 《ArcGIS Runtime SDK for Android开发笔记》——离在线一体化技术：离线矢量数据同步
1.前言 上一篇文章中我们实现了离线要素的编辑操作,这一篇中主要介绍离在线一体化技术中最后一个环节离线数据的同步功能,通过对数据的上传,服务器端的版本化管理,实现数据生产管理的整个流程. 转载请注明出 ...
- css 字体样式设置大全
css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...
- Vue2自定义指令改变DOM值后未刷新data中绑定属性的值
标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...
- 获取v$latch数据源实验
实验环境:Oracle Rac 11.2.0.3 首先获取v$latch的定义:通过PL/SQL或者get ddl等常规途径只能获取到v_$latch相关的视图信息.需要通过特殊方法获取v$latch ...
- Orchard Core 使用工作流处理审批和创建内容项
译自:http://www.ideliverable.com/blog/orchard-core-workflows-walkthrough-content-approval 转载请注明出处, 原文地 ...
- poj2253 Frogger dijkstra
题目大意: 给出n个岛的坐标,前两个坐标分别为A青蛙和B青蛙所在岛的坐标,A青蛙想到达B青蛙所在的岛,A可以从某一个岛跳到任意其它一个岛上,则A到B的每条路径都有一个跳的最远的距离Xi,求这些最远距离 ...
- Android（java）学习笔记3：线程的优先级
1. Java线程的优先级从1到10级别,值越大优先级越高线程默认优先级是5.值越大优先级越高 (1) 继承自Thread类创建线程类: package cn.itcast_04; public cl ...
- 20165322 预备作业3 Linux安装及学习
Linux安装及学习 安装部分 由于是第一次接触虚拟机知识,之前也没什么了解,我选择完全按照老师教程里的安装vbox虚拟机. 虚拟机安装的过程很顺利,不做详细讲解. 出现的问题 在启动我新建的虚拟电脑 ...
- Codeforces Round #432 (Div. 2)
A. Arpa and a research in Mexican wave Arpa is researching the Mexican wave. There are n spectators ...