ajax----发送异步请求的步骤
1)获取(创建)Ajax对象:获取XMLHttpRequest对象
2)创建请求:调用xhr的open方法
3)在发送请求之前需要设置回调函数:绑定指定xhr的onreadystatechange事件
4)调用send()方法发送请求
- //创建XMLHttpReuquest 对象
function createXhr() {
var xhr = null;
//浏览器判断
if (window.XMLHttpRequest) {
//可以直接new出来对象的说明是IE7、8、9 Chrome、FireFox等浏览器
xhr = new XMLHttpRequest();
} else {
//这样的就是IE 5.5、 IE 6等低版本的浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
- //创建异步请求方法get
function getServerText() {
//获取xhr
var xhr = createXhr();
//创建请求
xhr.open("get", "server.php", "true");//true表示异步请求
//设置回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
//服务器已经正确处理请求且正确响应数据到客户端
var resText = xhr.responseText;//返回服务器响应文本
//获取服务器响应给客户端的文本即server.php中的文本内容
document.getElementById("showText").innerHTML = resText;
}
}
//发送请求
xhr.send(null);//请求方式为get,所以请求体必须是null
}- 实例:模拟服务器发送请求
ajax提交数据(get方法):
$(document),ready(function(){
$("#txtName").blur(function(){
1)获取xhr
var xhr =createxhr();
2)创建请求
var name = $("#txtName").val();
var url = "checkname.jsp?name="+name;
xhr.open("get",url,true);
- 3)设置回调函数
- xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文 本
$("#txtNameTip").html(resText);//获取响应回来的 数据
}
}
4)发送请求
xhr.send (null);//get发送请求的方法
});
});
- //创建异步请求方法post
$(document),ready(function(){
$("#txtName").blur(function(){
1)获取xhr
var xhr =createxhr();
2)创建请求
var name = $("#txtName").val();
var url = "checkname.jsp";
xhr.open("post",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-
form-urlencoded");
3)设置回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState==4 && xhr.status==200){ //注意顺序
//服务器已经正确处理请求且正确响应数据到客户端
var resText= xhr.responseText;//返回服务器响应文
本
$("#txtNameTip").html(resText);//获取响应回来的
数据
}
}
4)发送请求
xhr.send ("name="+name);//Post方法发送方法
注意:必须在创建请求之后,发送请求之前使用setRequestHeader
()显示更改Content-Type消息头的值为
application/x-www-form-urlencoded ,否则获取不到传递过去的
数据
})
});
ajax----发送异步请求的步骤的更多相关文章
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
<黑马程序员_超全面的JavaWeb视频教程vedio\JavaWeb视频教程_day23_ajax> \JavaWeb视频教程_day23_ajax\day23ajax_avi\14.打 ...
- AJAX发送异步请求教程详解
AJAX 一.AJAX简介 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可 ...
- JQ+AJAX 发送异步请求
1. load() ; 作用:通过ajax 请求从服务器加载数据,并添加到符合要求的节点上 用法:$node.load(请求地址,请求参数) 请求参数写法: --"username=admi ...
- ajax发送异步请求
一:得到XMLHttpRequest对象 ajax其实只需要学习XMLHttpRequest一个对象 大多数浏览器都支持: var xmlHttp = new XMLHttprequest(); IE ...
- Ajax发送异步请求(四步操作)
1.第一步(得到XMLHttpRequest) *ajax其实只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了ajax!! *得到XMLHttpRequest >大多数浏 ...
- 使用AJAX技术发送异步请求,HTTP服务端推送
使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...
- 16 react 发送异步请求获取数据 和 使用Redux-thunk中间件进行 ajax 请求发送
1.发送异步请求获取数据 1.引入 axios ( 使用 yarn add axios 进行安装 ) import axios from 'axios'; 2. 模拟 在元素完成挂载后加载数据 并初始 ...
- 实现AJAX的异步交互的步骤
<input type="button" value="异步请求"id="btn"> <script> 实现ajax ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- 使用Ajax发送http请求(get&post请求)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...
随机推荐
- mysql 案例 ~ mysql字符集详解
一 谈谈mysql常见的字符集问题 二 字符集统一 1 character_set_server 2 character_set_client 3 java/php等连接字符集 4 chara ...
- zabbix系列~mysql进行监控
一 简介:zabbix进行数据库监控 二 目的:采用percona进行插件式安装监控 三 安装 环境 zabbix_agent 步骤 yum -y install php php-mysql yum ...
- 人人项目renren-security\git\renren-security的目录下的文件列表
\.git\config; \.git\FETCH_HEAD; \.git\HEAD; \.git\index; \.git\logs\HEAD; \.git\logs\refs\heads\mast ...
- CF1100F Ivan and Burgers
题目地址:CF1100F Ivan and Burgers 一道有难度的线性基题,看了题解才会做 预处理两个数组: \(p_{r,i}\) 表示满足下列条件的最大的 \(l\) :线性基第 \(i\) ...
- CF1091E New Year and the Acquaintance Estimation
题目地址:CF1091E New Year and the Acquaintance Estimation 首先,易知 \(ans\) 的奇偶性与所有给出的数的和的奇偶性相同 其次,易证 \(ans\ ...
- Contains Duplicate I & III
Contains Duplicate I Given an array of integers, find if the array contains any duplicates. Your fun ...
- Linker Scripts3--简单的链接脚本命令1
1.前言 这个部分我们描述了简单的链接脚本命令 2.设置entry point 程序中第一条运行的指令被称为入口点entry point,可以使用ENTRY链接脚本命令设置entry point,参数 ...
- wxpy: 用 Python 玩微信【转】
转自:https://wxpy.readthedocs.io/zh/latest/index.html 微信机器人 / 可能是最优雅的微信个人号 API wxpy 在 itchat 的基础上,通过大量 ...
- BIM 3D 数据交换格式 ----张建平(清华女)
1.collada EXPORTER 2.FBX 3D MAX 3.DAE 4.3D中的OBJ文件格式详解 ( http://www.cnblogs.com/slysky/p/408130 ...
- Going Home HDU - 1533 费用流
http://acm.hdu.edu.cn/showproblem.php?pid=1533 给一个网格图,每两个点之间的匹配花费为其曼哈顿距离,问给每个的"$m$"匹配到一个&q ...