原生ajax异步请求基础知识
一、同步交互与异步交互的概念：
* 同步交互：客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求).
* 异步交互：客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做其他任何事情(不等)；
同步与异步的区别：
* 同步交互
1、执行速度相对比较慢
2、响应的是完整的HTML页面
* 异步交互
1、 执行速度相对比较快
2、 响应的是部分数据
二、AJAX的概念：（Asynchronous JavaScript and Xml）--直译中文 - javascript和XML的异步
（简单理解-->就是客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax）
* Ajax实现的是B/S架构下的异步交互
* 实现异步交互的技术-- <iframe src="">元素
* Ajax具有核心对象-- XMLHttpRequest对象
三、实现Ajax的步骤
* 创建XMLHttpRequest对象
* 注册监听
* 建立连接
* 发送请求
实现Ajax的六步是什么?(不标准)
* 创建XMLHttpRequest对象
* 建立连接
* 发送请求
* 注册监听 - onreadystatechange事件
* 获取服务器端的通信状态 - readyState
* 获取服务器端的状态码
1、创建XMLHttpRequest对象的语法：
function getXhr()
{
// 声明XMLHttpRequest对象
var xhr = null;
// 根据浏览器的不同情况进行创建
if(window.XMLHttpRequest)
{// 表示除IE外的其他浏览器
xhr = new XMLHttpRequest();
}else{ // 表示IE浏览器下创建
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
// 调用getXhr()
var xhr = getXhr();
2、建立连接：
* 使用XMLHttpRequest对象的open(method,url)方法
* 作用 - 与服务器端建立连接
*参数含义：
* method - 设置当前请求的类型get/post
* url - 设置当前请求的地址
3、向服务器端发送请求：
*使用XMLHttpRequest对象的send(请求参数)方法：
* 请求参数的格式 - key=value
注意：* GET与POST的区别
* GET请求类型
* send()方法不起作用,但是不能被省略；语法：xhr.send(null);
* 请求参数 -在url后面写?key=value
* POST请求类型
* send()方法起作用,在send()方法被调用前,使用setRequestHeader()方法设置请求头信息
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4、注册监听:
* onreadystatechange事件
* 作用 - 监听服务器端的通信状态改变
xhr.onreadystatechange=function()
{
}
5、获取服务器端的通信状态：
*使用核心对象属性readyState、status
* readyState - 表示当前服务器端的通信状态
* 0 - (服务器端)尚未初始化
* 1 - (服务器端)正在接收
* 2 - (服务器端)接收完毕
* 3 - (服务器端)正在响应
* 4 - (服务器端)响应完毕
* status --表示当前服务器端的状态码
* 200 - 请求成功
* 404 - 网页找不到(请求路径不正确)
* 500 - 服务器端错误
if(xhr.readyState==4&&xhr.status==200)
{
}
6、获取响应数据：
使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据；
var data=xhr.responseText；
4~6步就是接收服务器端响应数据的步骤：
* 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
* 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(4--响应完毕)
* 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200--表示请求成功)
* 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据
demo：（这里省份也可以放在服务器端，通过 window.onload=function(){}在页面加载完后请求服务器关于省份的信息，方法步骤按照上面的4大步写就行）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax02_二级联动</title>
</head>
<body>
<form>
<select id="province">
<option>请选择</option>
</select>
<select id="city">
<option>请选择</option>
</select>
</form>
<script>
var se_province=document.getElementById("province");
var Pro_city=document.getElementById("city");
//加载页面后显示省份列表内容
window.onload=function(){
var option=province.getElementsByTagName("option");
var arrayProvice=["北京市","广东省","四川省","湖南省","云南省"];
for(var i=0 ;i<arrayProvice.length;i++)
{ //新建option标签
var option=document.createElement("option");
//把数组内容放入option里面
var textNode=document.createTextNode(arrayProvice[i]);
option.appendChild(textNode);
//给select标签添加option
se_province.appendChild(option);
}
} se_province.onchange=function(){
//先为city元素的option文本内容情况，防止在多次触发onchange事件时出现城市列表重复添加
var opts=Pro_city.getElementsByTagName("option");
//console.log(opts);
for(var j=opts.length-1;j>0;j--)
{
Pro_city.removeChild(opts[j]);
}
//alert(se_province.value); //判断：如果省份value值是请选择就不会向服务器发送请求，避免生成多余的option标签
if(se_province.value !="请选择"){
//执行ajax异步请求
var xhr=getXhr();
xhr.open("post","ajax02.php",true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
xhr.send("provcince="+se_province.value);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200)
//接收服务器端的数据内容
var data=xhr.responseText;//这里data是字符串
var citydata=data.split(",");//截断字符串变成数组
//console.log(data); for(var i=0;i<citydata.length;i++){
//新建option标签
var option=document.createElement("option");
//把数组内容放入option里面
var textNode=document.createTextNode(citydata[i]);
option.appendChild(textNode);
//给select标签添加option
Pro_city.appendChild(option); }
}
} } //创建XMLHTTPRequest对象， XMLHttpRequest 用于在后台与服务器交换数据
function getXhr(){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
</body>
</html>
ajax02.php文件代码：
<?php
//接收客户端发送的省份信息
$province=$_POST["provcince"]; switch($province){
case "北京市":echo "朝阳区,海淀区,通州区,怀柔区";
break;
case "广东省":echo "深圳市,东莞市,广州市,佛山市";
break;
case "湖南省":echo "长沙市,湘潭市,邵阳市,岳阳市";
break;
case "四川省":echo "成都市,南充市,绵阳市,广元市";
break;
case "云南省":echo "昆明市,曲靖市,玉溪市,楚雄市";
break;
}
?>
<PS:转载请注明出处！>
原生ajax异步请求基础知识的更多相关文章
- 关于我们ajax异步请求的方法与知识
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- ajax异步请求302
我们知道,只有请求成功ajax才会进行回调处理,具体状态码为 status >= 200 && status < 300 || status === 304; 这一点通过查 ...
- 原生ajax的请求过程
原生ajax的请求过程 创建全平台兼容的XMLHttpRequest对象: function getXHR(){ var xhr = null; if(window.XMLHttpRequest) { ...
- 黑马eesy_15 Vue：03.生命周期与ajax异步请求
黑马eesy_15 Vue:02.常用语法 黑马eesy_15 Vue:03.生命周期 黑马eesy_15 Vue:04.Vue案例(ssm环境搭建) vue的生命周期与ajax异步请求 1.Vue的 ...
- spring HandlerInterceptorAdapter拦截ajax异步请求，报错ERR_INCOMPLETE_CHUNKED_ENCODING
话不多说,直接上正文. 异常信息: Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING 问题描述: 该异常是在页面发送ajax请 ...
- jquery Ajax异步请求之session
写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...
- ajax异步请求Response.Redirect重定向
一个ajax异步请求报错->捕获异常->重定向错误提示页面. 一个简单的流程 结果一直搞不定.重定向无效.各种百度之. 后来突然想起 ajax的请求是不能在后台重定向的. 如果硬要重定向 ...
- jquery的ajax异步请求接收返回json数据
http://www.jb51.net/article/51122.htm jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发 ...
随机推荐
- struts2标签库----控制标签详解
前面几篇文章我们介绍了有关struts2的基本内容,简单理解了整个框架的运作流程.从本篇开始我们逐渐了解和使用struts2为我们提供的标签库技术,使用这些标签可以大大降低我们表现层的开发难 ...
- OC中Foundation框架
框架的概念 框架是由许多类.方法.函数.文档按照一定的逻辑组织起来的组合,以便使研发程序变的更容易在OS X下地Mac操作系统中大约有80个框架为所有程序开发奠定基础的框架称为Foundation框架 ...
- python基础--异常，对象和迭代器
异常处理 面向对象 迭代器和生成器 python异常处理 下面代码触发了一个FileNotFoundError >>> open("notexist.txt") ...
- python爬虫第一天
python爬虫第一天 太久没折腾爬虫 又要重头开始了....感谢虫师大牛的文章. 接下来的是我的随笔 0x01 获取整个页面 我要爬的是百度贴吧的图,当然也是跟着虫师大牛的思路. 代码如下: #co ...
- 增强for循环 -- foreach循环
1 作用 简化迭代器的书写格式.(注意:foreach循环的底层还是使用了迭代器遍历.) 2 适用范围 如果是实现了Iterable接口的对象或者是数组对象都可以使用foreach循环. 3 格 ...
- LeetCode:1. Add Two Numbers
题目: LeetCode:1. Add Two Numbers 描述: Given an array of integers, return indices of the two numbers su ...
- Servlet起步
什么是Servlet Servlet是sun公司制定的用来扩展web服务器功能的组件规范,通俗理解为遵循Servlet规范开发的实现了某个功能的Java组件.该组件没有 main 方法,不能独立地运行 ...
- 2017PHP程序员的进阶之路
2017PHP程序员的进阶之路 又是一年毕业季,可能会有好多毕业生即将进入开发这个圈子,踏上码农这个不归路.根据这些年在开发圈子总结的LNMP程序猿发展轨迹,结合个人经验体会,总结出很多程序员对未来的 ...
- 小议 - 来自《ＸＸ时代XX公司》的笔试编程题目
经过几天的雾霾,魔都终于放晴了.哥投了几天的简历,希望找到一份.NET开发方面的岗位.也收到了几个面试邀请.这不应Ge老师的要求,选了个良辰吉日,带着身份证,学位证怀揣着2B青年的梦想来这个XX公司面 ...
- 读阿里巴巴Java开发手册v1.2.0之工程结构有感【架构篇】
首先,把昨天那俩条sql语句的优化原因给大家补充一下,第一条效率极低,第二条优化后的,sql语句截图如下: 经过几个高手的评论和个人的分析: 第一条sql语句查询很慢是因为它首先使用了in关键字查询, ...