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 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况 ...
随机推荐
- stark——分页、search、actions
一.分页 1.引入自定义分页组件 在/stark目录下创建utils工具包目录,复制page.py到该目录下,文件中有之前自定义的分页组件. class Pagination(object): def ...
- .net 写魔兽登录
代码如下: 登录页面: public partial class FrmLogin : Form { public FrmLogin() { InitializeComponent(); } priv ...
- Linux服务器性能评估与优化(一)
网络内容总结(感谢原创) 1.前言简介 一.影响Linux服务器性能的因素 1. 操作系统级 性能调优是找出系统瓶颈并消除这些瓶颈的过程. 很多系统管理员认为性能调优仅仅是调整一下 ...
- 用nodejs做一个svn密码修改页面
linux上配置好svn服务后,管理修改密码还得去手工修改passwd这个文件,略麻烦,其实网上应该有配套的web管理修改界面程序.但我想自己用nodejs写一个,因为用node不用配置复杂的服务器. ...
- .NET开源工作流RoadFlow-表单设计-日期时间选择
在表单中添加一个日期时间选择框: 选择范围:指定一个日期选择范围. 时间:是否允许选择时间.
- CNN 和RNN 中input 长度不一致问题
转自:https://www.jianshu.com/p/86d667ee3c62,感谢分享! pad_sequences & Masking layer 上面提到,文本数据也可以用CNN来处 ...
- mybatis3 step by step 快速上手
作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/6895617.html 原创文章,转载请注明作者和出处,未经允许不可用于商业营利活动 官方网站 h ...
- WebLogic配置与部署
一.创建域: 第一步,选择“开始菜单”-> “Oracle WebLogic”-> “WebLogic Server 10gR3” -> “Tools”-> “Configur ...
- Siebel Tools client安装假死在92%问题解决
Solution to this error: This issue happens incase of installation is on unsupported operating system ...
- win7 64位 安装java jdk1.8 ，修改配置环境变量
下载jdk1.8,下载地址:http://www.wmzhe.com/soft-30118.html 安装时有两个程序,都安装在同一个目录下. win7 64位 安装java jdk1.8 ,修改配置 ...