原生Ajax实现异步交互
- 实现Ajax主要依靠XMLHttpRequest对象,所以首先要创建XMLHttpRequest对象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
//高版本浏览器
xhr = new XMLHttpRequest;
}else{
//IE低版本浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
var xhr = getXhr(); - 使用open方法与服务器建立连接
open(method, url, async);
xhr.open('post', 'data_montor.php', true);
xhr.open('get', 'data_montor.php?user = name', true);
//method 表示get/post
//url 表示请求的地址
//async 表示同步还是异步,async = true 异步(默认)
//若将async设置为false,官方认为XMLHttpRequest就是实现异步交互的会进行警告
//如果是get方法请求参数应跟在url之后,而不是通过send发送 - 客户端向服务器发送请求
send(请求参数)方法
//请求参数的格式 key = value
xhr.send('user = xinyue')
//注意:如果使用get方法,send不能向服务器发送请求数据,但是也不能忽略
//需要写成 send(NULL); 然后请求数据应放在open方法中的Url之后
//(详见上一步) - 客户端接受服务器端的响应:使用onreadyStatechange 时间监听服务器的通信状态
xhr . onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr. status == 200){
var data = xhr.responseText;
//HTML格式使用responseText接收服务器端的相应数据,解析过程比较复杂(拆串),拆串拼串极易出错
console.log(data);
}
}
}readyState 得服务器端当前通信状态 :
0 服务器端尚未初始化
1 正在发送请求
2 请求完成
3 请求成功,客户端正在接收服务器端的数据
4 响应完成
status : 1XX 信息类
2XX 成功
3XX 重定向
4XX 客户端错误
5XX 服务器端错误
原生Ajax实现异步交互的更多相关文章
- 表单验证--通过原生js模仿ajax的异步交互
今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...
- 实现AJAX的异步交互的步骤
<input type="button" value="异步请求"id="btn"> <script> 实现ajax ...
- 原生AJAX如何异步提交数据?
AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...
- jsp中使用原生js实现异步交互
Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化.并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读 ...
- AJAX 异步交互基本总结
AJAX (Asynchronous JavaScript and Xml) 直译中文 - javascript和XML的异步 同步与异步的区别: 同步交互 执行速度相对比较慢 响应的是完整的HTML ...
- ajax_异步交互-get/post方式
Ajax的异步交互: 客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做任何其他事情(不等). 实现Ajax的异步交互步骤(举例说明): get方式: 1.创建XMLHttpReq ...
- spring mvc 和ajax异步交互完整实例
Spring MVC 异步交互demo: 1.jsp页面: <%@ page language="java" contentType="text/html; cha ...
- 原生ajax异步请求基础知识
一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请 ...
- Ajax异步交互基础
1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
随机推荐
- 证明:对于一棵二叉树,若度为2的结点有n2个,叶子结点有n0个,则n0=n2+1
假设二叉树的0度,1度,2度结点数分别为\(n_0\),\(n_1\),\(n_2\),总节点数为\(T\) 则按照结点求和有 \[T=n_0+n_1+n_2 (1)\] 按照边求和,因为节点数等于边 ...
- Python 获取类对象的父类
参考 Get parent class name? Python 获取类对象的父类 给定一个类的对象a,要求获取该对象的父类. 方法: a.__class__.__bases__ 返回由该对象的父类组 ...
- dao层、service和action的运用和区别
DAO层叫数据访问层,全称为data access object,属于一种比较底层,比较基础的操作,对于数据库的操作,具体到对于某个表的增删改查, 也就是说某个DAO一定是和数据库的某一张表一一对应的 ...
- robot framework---校验新增条数功能
check总条数验证 [Arguments] ${beforevalue} ${endvalue} ${value} ${a} Evaluate '${beforevalue}'.replace('共 ...
- 解决问题:怎样在页面获取数组和List集合的长度
解决问题:怎样在页面获取数组和List集合的长度 我们在前端遍历后台数据的时候,经常是从后台传过来一个数组或List集合,在前端页面就可以使用JSTL的<c:For each>标签遍历数据 ...
- CentOS yum换源
1.备份系统自带yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2.进入yum源配 ...
- Asp.net core Identity + identity server + angular 学习笔记 (第三篇)
register -> login 讲了 我们来讲讲 forgot password -> reset password 和 change password 吧 先来 forgot pa ...
- JS-函数作用域
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量.
- scrapy框架使用笔记
目前网上有很多关于scrapy的文章,这里我主要介绍一下我在开发中遇到问题及一些技巧: 1,以登录状态去爬取(带cookie) -安装内容: brew install phantomjs (MAC上) ...
- python实现汉诺塔问题
汉诺塔问题可以简单描述成为将a柱子上的圆盘按一定规则借助b柱子完美地复制到c柱子上.现假设有a,b,c三根柱子,a柱子上的圆盘从上到下依次标号为1,2,3,……,n,且为递增状态.规则:每次移动一个盘 ...