原生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的更多相关文章

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

  3. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  4. 再谈React.js实现原生js拖拽效果

    前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...

  5. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  6. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  7. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

  8. 原生js封装ajax：传json，str，excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  9. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  10. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

随机推荐

  1. HDU_1532_最大流

    Drainage Ditches Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. C# 获得星期几

    var temp = System.DateTime.Today.ToString("dddd", new System.Globalization.CultureInfo(&qu ...

  3. 使用CSS3实现表格隔行/隔列变色

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  4. scss基础

    1.变量$ 全局 局部 .div{ $color:yellow; } 2.类似函数@mixin border-radius($radius) { }引用:@include border-radius( ...

  5. Django REST framework 分页

    三种分页:根据页码.根据索引.根据加密 http://www.xx.com/courses/?page=1&size=10 http://www.xx.com/courses/?offset= ...

  6. gitlab的添加密钥

    1.在本地电脑下载git的客户端并且安装 2.鼠标右键左面选中Git Bash Here 3.操作如下图生成密钥 4.将密钥复制过来添加到gitLab中 5.Eclipse配置密钥 6.在git创建的 ...

  7. python爬虫12 | 爸爸，他使坏，用动态的 Json 数据，我要怎么搞？

    在前面我们玩了好多静态的 HTML 想必你应该知道怎么去爬这些数据了 但还有一些常见的动态数据 比如 商品的评论数据 实时的直播弹幕 岛国动作片的评分 等等 这些数据是会经常发生改变的 很多网站就会用 ...

  8. Django的基础教程

    学Django需要什么基础? 1. Django是 python 语言写的一个Web框架包,所以你得知道一些 Python 基础知识. 2. 其次你最好有一些做网站的经验,懂一些网页 HTML, CS ...

  9. unigui的菜单树补习【2】treeview

    Treeview用于显示按照树形结构进行组织的数据.           Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元. ...

  10. rpm包下载地址

    https://dl.fedoraproject.org/pub/epel/6/x86_64/