原生JS---8
原生js学习笔记8——Ajax基础
什么是Ajax
不刷新页面的情况下从服务器获取、提交数据的一种数据交互方式。
Ajax使用步骤
1、创建Ajax对象
var httpRequest = new XMLHttpRequset可以创建一个Ajax请求对象。
注意:浏览器的兼容问题
IE6以及之前的IE不支持上边的创建爱你方法,这些版本的浏览器并没有集成Ajax,而是当做一个插件来处理,所以在创建时需要做兼容性处理:
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest;
} else{
// IE5\6使用的是ActiveXObject对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2、配置Ajax的请求地址
使用Ajax的open方法来配置地址
open方法的三个参数:
1. 数据提交方式
2. 地址
3. 是否异步请求
示例xmlHttp.open ("GET", “http://127.0.0.1/index.php”, "true")
数据的提交方式分为GET和POST两种方式
GET:
1. 把提交的数据的名称、对应的值使用“?”拼接在url之后,如果有多个数据,则使用“&”连接2. 参数的长度有限制,不能太长(由于各个浏览器对长度要求不一样,所以不详细说),否则会被截取3. 只能传递字符串类型的参数。
POST:
1. 把提交的数据封装在http头字段中。2. 参数长度可以在服务器端调整,因此理论上任意长度的参数都可以传递。3. 可以传递任意类型的数据
异步与同步:
异步(true):不会阻塞代码,ajax的工作未完成,继续执行后边的代码
同步(false):阻塞代码,ajax的工作未完成,则等待ajax完成后在执行后边代码当后续的代码需要用到前边的请求数据时,需要用同步,否则用异步请求。
3、发送请求
xmlHttp对象的send方法发送上边的请求: 示例xmlHttp.send()。
4、接收服务器返回的数据
responseText:ajax请求返回的内容被存放在这个属性里
readyState:ajax的工作状态
on readystate change:当readyState发生改变时,会触发
status:该属性代表服务器的工作状态(也就是http状态码):200表示请求成功
readyState返回码含义
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
示例1:使用Ajax请求服务器中的一个新网页资源
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function localXMLDoc () {
var xmlHttp;
// 1. 创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest;
} else{
// IE5\6使用的是ActiveXObject对象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 2. 每次readyState改变时,都会触发:onreadystatechange事件
xmlHttp.onreadystatechange = function () {
// readyState返回码含义//存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。//0: 请求未初始化//1: 服务器连接已建立//2: 请求已接收//3: 请求处理中//4: 请求已完成,且响应已就绪
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
document.getElementById('div').innerHTML = xmlHttp.responseText;
} else{// alert('请求不成功,状态'+xmlHttp.status);
}
}
// 3. 创建请求事件
xmlHttp.open("GET", "http://127.0.0.1/js.html",true);
// 4. 发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<button onclick="localXMLDoc()">点击加载</button>
<div id = 'div'></div>
</body></html>
示例2:使用Ajax请求一个带参数的URL
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#search ,#hidden{
display: inline-block;
width: 200px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
function shoeHint(str) {
var xmlHttp;
// 如果传入的字符串小于0则直接返回,并清空输入框
if (str.length == 0) {
document.getElementById('search').innerHTML = "";
return ;
}
// 创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlHttp.onreadystatechange=function() {
// 根据返回码判断请求是否成功
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById('hidden').innerHTML = xmlHttp.responseText;
}
}
// 配置请求地址
xmlHttp.open("GET", "https://127.0.0.1/hello.php?q="+str,true);
//开始请求
xmlHttp.send();
}
document.crea
</script>
</head>
<body>
<input type="text" name="search" id="search" value="" placeholder="" onkeyup="shoeHint(this.value)"/>
<br /><div id = "hidden" >
</div>
</body></html>
综合示例:使用Ajax加载新闻标题:
前端代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function getNews () {
var httpRequest = null;
httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "news.php/",true);
httpRequest.send();
httpRequest.onreadystatechange = function () {
if (httpRequest.status == 200 && httpRequest.readyState == 4) {
// alert(httpRequest.responseText);
// 将JSON数据转换为普通数据
var r = JSON.parse(httpRequest.responseText);
// console.log(r[0].title);
var hml = '';
for (var i = 0; i < r.length; i++) {
// 拼接无序列表
hml += "<li>"+"<a href='#'>" +r[i].title+"</a>"+"</li>";
}
document.getElementById('newsUl').innerHTML = hml;
}
}
}
</script>
</head>
<body>
<button id = "get" onclick="getNews()">获取新闻</button>
<ul id = "newsUl">
</ul>
</body></html>
服务端代码
<?php
$news = array(
array('title' => '楼继伟财长:简单提高个税起征点不公平'),
array('title' => '[银行]回应国有银行经营持续恶化:不良贷款率的确在温和上升 今后还会上涨'),
array('title' => '[改革]称财税改革进度低于预期 营增改今年完成 难点在于纳税人多比较复杂'),
array('title' => '[债务]回应地方债增速加大:赤字率可适当提高 称借钱可买房 不能用于吃饭'),
array('title' => '[相关]个人综合税方案已经提交 谈"劳动合同法保护企业不足":财政部不修法'),
);
echo json_encode($news);
?>
GET请求注意问题!!:
1. Ajax的缓存问题:如果反复请求同一个URL,则第二次请求的内容是从浏览器缓存中拿到的,并不是真正服务器端的内容,所以为了避免服务器内容更改,但是客户端从缓存中取数据,拿不到新数据,我们可以在get请求中的参数末端添加一个随机数、或时间戳作为参数:'http://127.0.0.1?username=zhangsan&password=12345&'+ new Date()
2. Ajax的乱码问题:如果请求参数中有中文,则会因为编码不统一导致后台认不出中文参数的情况,所以我们需要把中文参数进行编码:'http://127.0.0.1?username='+encodeURI('全政')+'&password=123456&'+ new Date()
POST请求注意问题!!
1. POST请求的参数不是拼接在url之后,而是放在send()方法里:send('username=zhangsan&password=12345&'+ new Date()')
2. 请求编码问题:form表单提交时,默认的编码是:enctype="application/x-www-form-urlencoded" 而Ajax请求需要手动设置编码方式,在setRequestHeader('content-type', 'pplication/x-www-form-urlencoded')设置。
form提交数据示例:
<form action="" method="post" enctype="application/x-www-form-urlencoded">
<input type="submit" value=""/></form>
原生JS---8的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生js实现autocomplete插件
在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 原生JS实现购物车结算功能代码+zepto版
html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
随机推荐
- 零基础转行Linux云计算运维工程师获得20万年薪的超级学习技巧
云计算概念一旦产生便一发不可收拾,成为移动互联网时代最为火热的行业之一.国内各大互联网公司例如阿里.腾讯.百度.网易等纷纷推出自己的云计算产品,3月10日,腾讯云0.01元投标时间更是让云计算在普罗大 ...
- iic通讯 FPGA实现 mpu6050为例
IIC最常用的通讯协议,但普遍用于单片机.arm这些,用FPGA实现大材小用,但对于菜鸡水平练练手很不错,考验串并转换和时序的控制.今天我就以mpu6050陀螺仪为例,实现FPGA的iic通信. 1. ...
- 00_Rust安装及Hello World
Rust 官网: https://www.rust-lang.org 版本:nightly.beta.stable 如何设计语言的讨论:https://github.com/rust-lang/rfc ...
- SSH技术介绍和Xshell公钥远程登陆
SSH简介 传统的网络服务程序,比如FTP,POP,Telnet,本质上都是不安全的,因为它们在网络上用明文传送数据.用户账号和用户口令,很容易受到中间人攻击方式的攻击,攻击者会冒充真正的服务器接收用 ...
- models中,对于(Small)IntegerField类型字段的choices参数在前端的展示
# models.py class UserInfo(models.Model): gender_choices = ( (1, "男"), (2, "女"), ...
- 面试题:你能写一个Vue的双向数据绑定吗?
在目前的前端面试中,vue的双向数据绑定已经成为了一个非常容易考到的点,即使不能当场写出来,至少也要能说出原理.本篇文章中我将会仿照vue写一个双向数据绑定的实例,名字就叫myVue吧.结合注释,希望 ...
- ansible plugins 列表
[action plugins] [cache plugins]jsonfilememcachedmemorymongodbpickleredisyaml [callback plugins]acti ...
- nyoj 309
#include<stdio.h> #include<stdlib.h> #define N 1100 int c[N]; int main() { int l,n,i,m,a ...
- 调度器Quartz的配置文件中的线程池设置
在使用调度器Quartz来进行数据归档的时候,当我们开的定时任务很多的时候,就会出现一些定时任务不会被触发的现象,这就是线程阻塞.那到底什么叫线程阻塞呢? 线程阻塞,顾名思义就是说线程被阻塞了,没有按 ...
- N天学习一个linux命令之umask
前言 umask不是linux命令,而是shell内置的指令,俗称用户权限掩码,用于对用户创建的文件和目录设置默认权限.默认的权限掩码是0022,也就是说新创建的文件权限是0644,新创建的目录权限是 ...