原生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访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
随机推荐
- oracle sql生成临时递增数据
1.生成1至10记录 select rownum from dual connect 结果: 12345678910 2.生成最近12个月记录 ), 'yyyyMM') time from dual ...
- selenium修改cookie
WebDriver操作cookie的方法:cookie以字典形式保存 get_cookies() 获取所有的cookie get_cookie(name) 返回字典的key为"n ...
- Java核心知识盘点(一)- 数据存储
MySQL 索引使用的注意事项 1.索引的目的:在于提高查询效率,插入和更新的操作,数据库的操作是慢的,但是查询操作会非常快,索引可以对表中一个或多个字段进行加索引动作. 2.索引的类型: 1.唯一索 ...
- lambda表达式应用在闭包中
def make_repeat(n): return lambda s : s * n a = make_repeat(2) print(a(8)) 等于 def make_repeat(n): de ...
- Asp.net core Identity + identity server + angular 学习笔记 (第五篇)
ABAC (Attribute Based Access Control) 基于属性得权限管理. 属性就是 key and value 表达力非常得强. 我们可以用 key = role value ...
- Kafka+OpenCV 实现实时流视频处理
1. 启动Kafka Server bin/kafka-server-start.sh config/server.properties & 2. 创建一个新topic bin/kafka- ...
- android --- api json数据
「一个」.「Time 时光」.「开眼」.「一席」.「梨视频」.「微软必应词典」.「金山词典」.「豆瓣电影」.「中央天气」.「魅族天气」.「每日一文」.「12306」.「途牛」.「快递100」.「快递」 ...
- vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值
首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...
- 【ybt1252】走迷宫
(还是蛮经典的一道bfs) 显然算法bfs [传送门] 算法基本上算是bfs的模板了,(模板详见[新知识]队列&bfs[洛谷p1996约瑟夫问题&洛谷p1451求细胞数量]) #inc ...
- C语言缓冲区
定义 缓冲区是内存空间的一部分,用于缓冲输入或输出的数据.根据其对应的是输入设备还是输出设备,分为输入缓冲区和输出缓冲区. 类型 缓冲区分为三种类型:全缓冲.行缓冲和不带缓冲. 1.全缓冲 在这种情况 ...