原生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访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一 ...
随机推荐
- vue文档阅读笔记——计算属性和侦听器
页面链接:https://cn.vuejs.org/v2/guide/computed.html 注意点 计算属性用于 替代模板内的表达式. 如果计算属性所依赖的属性未更新,会返回自身的缓存. 侦听器 ...
- PHP curl Post请求和Get请求~
//获取的参数 $api_key = '8a82d53a57b06c1d835d129f7e43d49c'; $orderNum = pdo_fetch('select ddlm_order_no f ...
- git commit -m 提交的内容换行
网上说只需要通过单引号来换行,一直没理解,后面终于试出来了.总结一句话就是. . 先输入第一个引号,按Enter即可换行,完成后再补齐后面的引号 // 步骤一: 输入第一行 git commit -m ...
- 数据库连接超时:“The last packet successfully received from the server was xxx milliseconds ago”
产生的原因:应用方的数据库连接有效期时间,大于数据库自己设置的有效期. 解决方案: 一.修改druid配置(如果使用druid的话) spring.datasource.druid.validatio ...
- day_其他操作符的重载
#include <iostream> #include <stdlib.h> using namespace std; class A{ public: A(void) { ...
- zookeeper图形化的客户端工具
追加一个zookeeper图形化的客户端工具: 1.zookeeper图像化客户端工具的下载地址:https://issues.apache.org/jira/secure/attachment/12 ...
- 【编程语言】Kotlin之object关键字
在一个体重秤项目里面使用Kotlin开发,考虑到项目比较小型轻量,所以和团队申请决定使用Kotlin开发,以此熟悉和尝试一下Kotlin. 首先使用Kotlin之后,发现能和Java很好的兼容一起,开 ...
- Unity---在Hierarchy视图中将选中的对象的层级目录复制到剪切板
using UnityEditor; using UnityEngine; public class ObjPathCopyTool : ScriptableObject { [MenuItem(&q ...
- GT sport赛道详解 - Dragon Trail | 龙之径
参考:GT sport所有赛道简介 今天的心情变化挺大,从绝望放弃到豁然开朗. 前言:GT sport有个排位赛,是每位sim赛车手提升自己等级的唯一途径,其中一个排位赛就是龙之径II(逆时针跑),我 ...
- 20190320xlVBA_考场座位设置
花了一写时间做了一个Excel宏工作簿,可以根据考场人数.座位排列和考生名单 生成<考试座位表><考生去向表><考试通知单>,想要的前往了解哦: https://i ...