js原生ajax

AJAX

准备工作-服务器环境的搭建

ajax可以在本地使用,但是牵扯到不同源问题,需要跨域操作。下面是两个文件的代码,test.html放在桌面上,cors.php放在搭好的服务器上面,我这里配置的端口号是9096,端口号可以自行配置,默认的话是80端口,双击打开test.html文件,控制台会输出下面信息

{"code":200,"msg":"success"}

test.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
head>
<body>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js">script>
    <script>
        $.get("http://localhost:9096/testCode/cors/cors.php").done(function(data){
                console.log(data)
        })
    script>
body>
html>

cors.php

 
    header("access-control-allow-origin: *");
    $result = array(
        'code' => 200,
        'msg' => 'success'
    );
    if($_GET['callback'])
        echo ';'. $_GET['callback'] . '(' . json_encode($result) .')';
    else
        echo json_encode($result);
?>

对上面这些不懂得可以直接忽略,不影响下面学习,学习ajax最好在本地配置一个服务器,将代码放在服务器下面对应的文件夹中通过127.0.0.1或者localhost或者配置虚拟主机来访问。

最简单的办法是在网上下载一个集成的环境,我们以php语言和apache服务为例,比如集成环境phpstudy、wamp等,爱鼓捣的码友可以自己动手一步一步的配置。我本地使用的是phpstudy集成环境,安装使用都比较方便,也不大才35.6M。

温馨提示:看到这里的默认已经在本地搭建好服务器,并将端口号配置为9096,如果没有配置端口号将下面的9096替换为80或者省去即可。下面的代码均放在服务器下面通过127.0.0.1或者localhost或者配置虚拟主机来访问。

什么是Ajax

全称 Asynchronous JavaScript and XML (异步JavaScript和XML)

用JavaScript异步的形式去操作xml,它要完成的工作也就是数据交互。

数据交互也就是可以从某个地方拿取数据,也可以发送数据到某个地方。

一般情况下我们会使用ajax和后端(php、nodejs等)进行数据交互,我们会把数据发送给后端,后端接收到数据后做出一些操作后返回一些数据给我们,这就是数据交互,ajax做的就是这一块。

它有一个特点,就是体现在异步交互上面,可以节约用户时间,提高用户体验,减少数据请求等。

ajax可以在不刷新页面的情况下发送一个请求到某个地方获取一些数据。

例子:这里以一个静态文件作为例子,test.html与1.txt在同一级,都在服务器下面的www目录下,我们打开浏览器,访问localhost:9096/test.html,单击按钮将会请求同一目录下1.txt文件的内容,如果成功的话会弹出一个弹出框显示hello,ajax!。

test.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                //ajax的整个流程可以理解为浏览器操作,比如:
                var xhr = new XMLHttpRequest();//可以想象为打开浏览器
                xhr.open('get','1.txt',true);//在地址栏输入地址
                xhr.send();//按下回车提交
                //等待浏览器返回内容
                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {//返回内容
                        if(xhr.status == 200){//200成功状态码
                            alert(xhr.responseText);
                        }else{
                            alert('出错了,Err:' + xhr.status );
                        }
                    }
                }
            }
        }
    script>
head>
<body>
    <input type="button" value="按钮" id="btn">
body>
html>

1.txt

hello,ajax!

创建Ajax对象

  1. 创建一个ajax对象,上面的new XMLHttpRequest()适用通用浏览器,ie6以下是new ActiceXObject(‘Microsoft.XMLHttp’),对此我们需要解决兼容性问题。
//方法一:
var xhr = null;
if(window.XMLHttpRequest{
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiceXObject('Microsoft.XMLHTTP');
}
//方法二:
var xhr = null;
try{
    xhr = new XMLHttpRequest();
}catch(e){
    xhr = new ActiceXObject('Microsoft.XMLHttp');
}

数据的请求

open方法有三个参数

  1. 打开方式,也就是请求方式(get、post等,其他的可以在网上找一下)

    • get
      • 把数据名称和数据值用等号(=)连接,如果有多个的话,那么它会把多个数据组合用&进行连接,然后把数据放到url?后面传到指定页面
      • url长度限制的原因,我们不要通过get方式传递过多的数据
    • post
      • 理论上无限制,实际上我们可以通过改变php.ini配置文件中的post_max_size来限制传送数据的大小
  2. 请求地址

    • 数据提交的地址,默认是当前页面
  3. 是否异步

    • 异步:非阻塞,前面的代码不会影响后面代码的执行
    • 同步:阻塞,前面的代码会影响后面代码的执行

setRequestHeader方法

  • xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);//申明发送的数据类型

send方法

  • get请求的send方法无需参数,例如:xhr.send();get请求的数据放在url中,例如
xhr.open('get','get.php?username=zhou&age=21',true);
  • post请求的数据放在send方法里面,例如:
xhr.send('username=zhou&age=21');

数据的获取

onreadystatechange事件: (on readystate change)当readyState改变的时候触发

readyState : ajax工作状态

  • 0 (未初始化)对象已经创建,但还没有调用open()方法
  • 1 (启动)已经调用open() 方法,但尚未调用send()方法发送请求
  • 2 (发送)send()方法已调用,请求已经发送完成,但尚未接收到响应
  • 3 (接收)已经接收到部分响应数据
  • 4 (完成)已经接收到了全部数据,而且已经可以在客户端使用了

status : 服务器状态,http状态码

responseText : ajax请求返回的内容就被存放到这个属性下面

下面是一个例子,text.html和get.php在服务器下同一级

下面用到了PHP中的json_encode函数,和JS中的JSON.parse()方法,意义在于将这些数据统一转换为json格式。

text.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                //创建对象
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    xhr = new ActiceXObject('Microsoft.XMLHttp');
                }
                xhr.open('get','get.php',true);
                xhr.send();//发送请求

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if(xhr.status == 200){//成功
                            alert(JSON.parse(xhr.responseText));
                        }else{
                            alert('出错了,Err:'+xhr.status);
                        }
                    }
                }
            }
        }
    script>
head>
<body>
    <input type="button" value="按钮" id="btn">
body>
html>

get.php


header('content-type:text/html;charset="utf-8"');
error_reporting(0);// 关闭错误报告

$arr = array('zhou','21','男');

echo json_encode($arr);

get请求

get请求有时可能会有缓存和乱码问题,在下面有相应解决方案

例子:

test.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    xhr = new ActiceXObject('Microsoft.XMLHttp');
                }
                xhr.open('get','get.php?username=zhou&age=21',true);
                xhr.send();

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if(xhr.status == 200){
                            alert(JSON.parse(xhr.responseText));
                        }else{
                            alert('出错了,Err:'+xhr.status);
                        }
                    }
                }
            }
        }
    script>
head>
<body>
    <input type="button" value="按钮" id="btn">
body>
html>

get.php

'content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_GET['username'];
$age = $_GET['age'];

echo json_encode("$username,$age");

get请求的响应默认是可以缓存的(响应应该包含一个到期时间, 或者有一个验证器),get请求被缓存,导致页面数据没有刷新,我们有时候需要针对缓存问题有一个解决方案:

  1. 缓存问题,在url?后面链接一个随机数,这里使用时间戳
xhr.open('get','get.php?username=zhou&age=21&'+new Date().getTime(),true);
  1. 乱码问题,使用encodeURI对数据进行编码
xhr.open('get','get.php?username='+encodeURI('周')+'&age=21&'+new Date().getTime(),true);

post请求

  1. post必须要告诉后端发送的数据是什么类型的,然后后端才能按照这个类型来解析数据,如果不告诉后端发送的是什么类型,后端将不解析。
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//post必须要告诉后端发送的数据是什么类型的
  1. post方式,数据放在send()里面作为参数传递
xhr.send('username=zhou&age=21');
  1. post和get不一样,post没有缓存问题,post用来提交数据,是没有缓存的,get一般用来的到数据,可能存在缓存问题。这跟ajax没有关系,跟web机制有关系。
  2. post没有乱码问题,因为在发送数据的时候已经声明了发送的数据是什么类型的,所以在发送数据的时候自动帮你把数据进行编码,比如下面这个,在发送数据的时候自动对数据进行url编码,所以说无需在对数据进行编码。
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

post请求的例子:

text.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function(){
                var xhr = null;
                try{
                    xhr = new XMLHttpRequest();
                }catch(e){
                    xhr = new ActiceXObject('Microsoft.XMLHttp');
                }
                xhr.open('post','post.php',true);
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');//post必须要告诉后端发送的数据是什么类型的
                xhr.send('username=zhou&age=21');

                xhr.onreadystatechange = function(){
                    if (xhr.readyState == 4) {
                        if(xhr.status == 200){
                            alert(JSON.parse(xhr.responseText));
                        }else{
                            alert('出错了,Err:'+xhr.status);
                        }
                    }
                }
            }
        }
    script>
head>
<body>
    <input type="button" value="按钮" id="btn">
body>
html>

post.php

'content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_POST['username'];
$age = $_POST['age'];
echo json_encode("$username,$age");

你可能感兴趣的:(javascript)