蓝鸥原生JS：什么是Ajax及Ajax使用步骤

来源：互联网发布：无印良品淘宝正品店铺编辑：程序博客网时间：2024/05/01 06:47

蓝鸥原生JS：什么是Ajax及Ajax使用步骤

零基础学习HTML5—html+css基础

什么是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)"/>

</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>

</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>

0 0