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 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...
随机推荐
- join......on 后面的and 和where的区别
a.where 是在两个表join完成后,再附上where条件. b. and 则是在表连接前过滤A表或B表里面哪些记录符合连接条件,同时会兼顾是left join还是right join.即 假如是 ...
- xcode选择开发者时"The Apple Developer Program License Agreement has been updated"
解决方法:进入开发者中心查看红色提示信息,同意就行
- tr标签是什么
<tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素.
- siebel 界面搭建
Siebel界面的初步搭建都是基于Siebel Tools工具来创建的,其搭建步骤: 1. 首先先创建一个Project项目,点击project--->点 new Record--->输入 ...
- windows默认共享的打开和关闭？
windows默认共享的打开和关闭? Windows启动时都会默认打开admin$ ipc$ 和每个盘符的共享,对于不必要的默认共享,一般都会把它取消掉,可当又需要打开此默认共享时,又该从哪里设置 ...
- eclipse中copy qualified name使用方式
转载自:原文:https://blog.csdn.net/love20yh/article/details/81328202 copy qualified name得到的结果可以有2类: 1./use ...
- Linux下Vue项目搭建karma测试框架
前提:vue项目已创建,node.js.npm已安装 1.全局安装karma脚手架 karma-cli [貌似可以不安装] #npm i -g karma-cli 2.转到Vue项目目录,项目下安装 ...
- wamp的www目录更改为指定目录
wamp的www目录更改为指定目录内容简介:主要过程: (1)修改httpd.conf文件 (2)修改新的www目录下的index.php文件 (3)修改manage.ini的278行和manage. ...
- ubuntu16.4安装最新版wine3.0
1.主体大致过程 $ wget https://dl.winehq.org/wine/source/3.0/wine-3.0.tar.xz $ tar -xvf wine-3.0.tar.xz $ c ...
- Codeforces Round #515 (Div. 3) B. Heaters【 贪心 区间合并细节 】
任意门:http://codeforces.com/contest/1066/problem/B B. Heaters time limit per test 1 second memory limi ...