Ajax概念-简单例子复习/Ajax概念+简单例子复习

同步与异步

同步：页面请求实时传给服务器，导致必填数据没有填的时候，要回到页面上重新从头填写，耗时长、客户体验差。

异步：在页面必填项写上必填选项，不用通过传给服务器判断必填内容是否已经填写完整，耗时短、用户体验强。

异步：

XMLHttpRequest： XMLHttpRequest对象的出现分割了同步和异步。XMLHttpRequest出现之前是同步的，出现之后是异步的。

步骤：

利用html+css来实现页面，表达信息；
用XMLHttpRequest和web服务器进行数据的异步交换
运用js操作DOM，实现动态局部刷新；

创建XMLhttpRequest对象

var request;
if(window.XMLHttpRequest){
    request = new XMLHtpRequest();
}else{
    request = new ActiveXObject("Microsoft.XMLHTTP");//IE5,IE6
}

Ajax+HTTP请求

HTTP请求，简洁版

建立TCP连接
Web浏览器向Web服务器发送请求命令
Web服务器发送请求头
Web服务器应答
Web服务器向浏览器发送数据
Web服务器关闭TCP连接

http 状态码

1XX 信息类表示收到web浏览器请求
2xx 成功 200
3xx 重定向，表示请求没有成功，
4xx 表示客户端错误
5xx 服务器错误，表示服务器不能完成对请求的处理

XMLHttpRequest发送方法

open（method,url,async）//async:同步false；异步：true（默认）
send(string)

例子：

request.open("GET",  "get.php",true);
request.send();

request.open("POST", "post.php",true)；
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//写在中间，引用表单时，告诉服务器是什么格式，Content-type"告诉服务器是表单格式，页面表单数据向服务端传输时的编码方式application/x-www-form-urlencoded

request.send("name=jaymo&sex=男");

XMLHttpRequest取得相应

var request=new XMLHttpRequest();
    request.open("GET","get.php",true);
    request.send();
    request.onreadyStatechange=function(){
    if（request.readyState===4&&request.status===200）{
    //做一些事
    }  
}

例子

例子简介：

html：用来查询员工查询和新建
php：用来查询和新建的后台接口
XAMPP

启动xampp

修改端口，改为8088；
在浏览器输入：http://localhost:8088/

建立php文件：

test.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
</head>
<body>
<?php
echo " Hello World! 这是测试页面。";
?>
    
</body>
</html>

真正例子

json解析

第一种方法：

1
2
3

var jsondata='{"staff":[{"name":"红旗","age":18},{"name":"郭靖","age":16}]}';
var jsonobj=eval('('+jsondata+')');
alert(jsonobj.staff[0].name);

第二种方法：

1
2
3

var jsondata='{"staff":[{"name":"红旗","age":18},{"name":"郭靖","age":16}]}';
var jsonobj=JSON.parse(jsondata);
alert(jsonobj.staff[0].name);

在JavaScript中有eval和JSON.parse两种方式，推荐后者，因为前者是不安全的，它不能验证json格式的合法性，不能避免在json中直接执行JavaScript代码，从而造成潜在威胁的存在。推荐用JSONlint进行json在线验证

本作品采用知识共享署名 2.5 中国大陆许可协议进行许可，欢迎转载，但转载请注明来自JayMo，并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文永久链接：http://jaymo666.github.io/2018/03/28/Ajax概念-简单例子复习/