原生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. java浅析

    基本结构 1.以字节码的方式运行在虚拟机上,不是直接编译成机器码运行,所以性能上差于 C 但是高于 python这样的解释形语言. 笔者大学期间学习过 汇编和C,工作后使用python,对这两种语言有 ...

  2. （转） Hibernate检索方式概述

    http://blog.csdn.net/yerenyuan_pku/article/details/70554816 Hibernate检索方式概述 我们在对数据库的操作中,最常用的是select, ...

  3. Nginx +tomcat 实现负载均衡集群

    一.       工具   nginx-1.8.0 apache-tomcat-6.0.33 二.    目标   实现高性能负载均衡的Tomcat集群: 三.    步骤   1.首先下载Nginx ...

  4. C lstat major MAJOR 获得设备号

    #cat lstat.c #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> #inc ...

  5. / Vijos / 题库 / 1622 / 文件查找(HOI)

    / Vijos / 题库 /1622/文件查找(HOI) 描述 WINDOWS是一个很庞大的操作系统(当然啦,看占的硬盘空间就知道了),比如说,它的文件查找系统.现在,请你用PASCAL或者C或者C+ ...

  6. 玩转vim编辑器

    1.vim 编辑器可以自定义配置:包含初始化命令的文件叫vimrc(h vimrc),version ---查看版本号.系统-用户配置文件所在位置. 2. 可视模式: 操作一块区域代码: 按v    ...

  7. 使用 lua 编写 wireshark 协议解析插件

    一.平台 操作系统:windows 7 wireshark:1.10.3 lua:5.1 二.准备 lua 语言基本语法,特别是关于表操作和循环 wireshark 文档,包括用户使用文档和开发者文档 ...

  8. 基于Python3.7和opencv的人脸识别（含数据收集，模型训练）

    前言 第一次写博客,有点紧张和兴奋.废话不多说,直接进入正题.如果你渴望使你的电脑能够进行人脸识别:如果你不想了解什么c++.底层算法:如果你也不想买什么树莓派,安装什么几个G的opencv:如果你和 ...

  9. Beetl学习总结（2）——基本用法

    2.1. 安装 如果使用maven,使用如下坐标 <dependency> <groupId>com.ibeetl</groupId> <artifactId ...

  10. Java基础学习总结（24）——Java单元测试之JUnit4详解

    Java单元测试之JUnit4详解 与JUnit3不同,JUnit4通过注解的方式来识别测试方法.目前支持的主要注解有: @BeforeClass 全局只会执行一次,而且是第一个运行 @Before  ...