php下的原生ajax请求

浏览器中为我们提供了一个JS对象XMLHttpRequet，它可以帮助我们发送HTTP请求，并接受服务端的响应。

意味着我们的浏览器不提交，通过JS就可以请求服务器。

ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。

1、创建XHR对象

var xhr = new XMLHttpRequest(); //暂不考虑兼容

2、XHR的对象属性和方法

方法：

open("get/post", url, true/false);

//有参数则k=v&k1=v1这种形式

send(null);

属性：

//代表请求状态，不断变化，为4时，请求结束

readyState

//响应的内容

responseText

//响应的状态码200，403，404

status

//状态文字

statusText

事件：

//当readyState变化时会触发此事件

onreadystatechange = function() {};

3、通过XHR对象发送get请求

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <input type="text" name="con" value="" id="con" />

        </div>

    </body>

    <script type="text/javascript">

        var ipt = document.getElementById("con");

        ipt.onblur = function () {

            var con = this.value;

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php?con=" + con;

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseText服务器响应的内容

                    alert("服务器响应数据：" + this.responseText);

                }

            };

            //打开链接

            xhr.open("get", url, true);

            //发送请求

            xhr.send(null);

        }

    </script>

</html>

ajax.php如下：

<?php

$con = !empty($_GET['con']) ? trim($_GET['con']) : '没有数据';

echo $con;

填入数据，当鼠标焦点离开input时，触发请求，弹出响应内容。

4、通过XHR对象发送post请求

(1)、open()第1参数为post

(2)、POST的参数以k=v&k1=v1&k2=v2的形式拼接，并用send()发送

(3)、必须要设置Content-Type为application/x-www-form-urlencoded

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <input type="text" name="name" value="" id="name" />

            <input type="password" name="pwd" value="" id="pwd" />

            <input type="submit" name="sub" value="提交" id="sub" />

        </div>

    </body>

    <script type="text/javascript">

        var sub = document.getElementById("sub");

        sub.onclick = function () {

            var name = document.getElementById("name").value;

            var pwd = document.getElementById("pwd").value;

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php";

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseText服务器响应的内容

                    alert("服务器响应数据：" + this.responseText);

                }

            };

            //打开链接

            xhr.open("post", url, true);

            //设置请求头部

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

            //发送请求

            xhr.send("name=" + name + "&pwd=" + pwd);

        }

    </script>

</html>

ajax.php如下：

<?php

$name = !empty($_POST['name']) ? trim($_POST['name']) : '没有数据';

$pwd = !empty($_POST['pwd']) ? trim($_POST['pwd']) : '没有数据';

echo '用户名：', $name, '密码：', $pwd;

单击submit后发送post请求，弹出响应信息。

5、返回值json，html，text，xml

返回值只有两种text，和xml。不过text内容中可以是一段html或json结构的字符串。

(1)、返回json格式

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <select id="city"></select>

            <input type="button" value="获取" id="get" />

        </div>

    </body>

    <script type="text/javascript">

        var get = document.getElementById("get");

        var city = document.getElementById("city");

        get.onclick = function () {

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php";

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseText服务器响应的内容

                    //通过eval把传来的json字符串转成对象

                    var data = eval(this.responseText);

                    var str = "";

                    for(var ix in data) {

                        str += "<option value='" + data[ix].id + "'>" + data[ix].name + "</option>";

                    }

                    city.innerHTML = str;

                }

            };

            //打开链接

            xhr.open("get", url, true);

            //发送请求

            xhr.send(null);

        }

    </script>

</html>

ajax.php如下：

<?php

$data = array(

    array('id' => 1, 'name' => '上海'),

    array('id' => 2, 'name' => '北京'),

    array('id' => 3, 'name' => '深圳'),

);

echo json_encode($data);

(2)、返回xml格式

xml通过responseXML来读取，responseXML不是字符串，是DOM对象。

<!DOCTYPE html>

<html>

    <head>

        <title>ajax</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body>

        <div id="box">

            <div id="news"></div>

            <input type="button" value="获取" id="get" />

        </div>

    </body>

    <script type="text/javascript">

        var get = document.getElementById("get");

        var news = document.getElementById("news");

        get.onclick = function () {

            //创建XHR对象

            var xhr = new XMLHttpRequest();

            //设置请求URL

            var url = "./ajax.php";

            //设置XHR对象readyState变化时响应函数

            xhr.onreadystatechange = function () {

                //readyState是请求的状态，为4表示请求结束

                if (xhr.readyState == 4) {

                    //responseXML服务器响应的内容

                    var data = this.responseXML;

                    var str = "";

                    var title = data.getElementsByTagName("title");

                    str += "<p>" + title[0].childNodes[0].nodeValue + "</p>";

                    str += "<p>" + title[1].childNodes[0].nodeValue + "</p>";

                    str += "<p>" + title[2].childNodes[0].nodeValue + "</p>";

                    news.innerHTML = str;

                }

            };

            //打开链接

            xhr.open("get", url, true);

            //发送请求

            xhr.send(null);

        }

    </script>

</html>

ajax.php如下：

<?php

header('Content-Type: text/xml;charset=utf-8');

$xml = <<<EOD

<?xml version="1.0" encoding="utf-8"?>

<news>

    <title>111</title>

    <title>222</title>

    <title>333</title>

</news>

EOD;

echo $xml;

6、ajax的同步与异步

通过设置open()的第三个参数true/false，来查看请求的效果。

同步请求：

发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。

异步请求：

发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。

php下的原生ajax请求的更多相关文章

Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
原生 ajax 请求
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
IE9下JQuery发送ajax请求失效
最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案: 解决方案一: 设置浏览 ...
前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件其他 j ...
js原生ajax请求get post笔记
开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...
.net MVC下跨域Ajax请求(CORS)
二.CROS (Cross-origin Resource Sharing) CROS相当于一种协议,由浏览器.服务端共同完成安全验证,进行安全的跨域资源共享.对于开发人员来说就跟在本站AJAX请求一 ...
JavaScript原生Ajax请求纯文本数据
源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
原生ajax请求的五个步骤
//第一步,创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); function CommentAll() { //第二步,注册回调函数 xm ...

随机推荐

Hibernate JavaBean.hbm.xml配置
主键生成策略: hibernate中必须设置主键 <generator> 由数据库维护: identity:用于自动生成主键方式(没有自增主键的数据库不使用eg:oracle) seque ...
安装phoenix时，执行命令./sqlline.py hostname1,hostname2.hostname3..... 时报错 ImportError: No module named argparse
问题描述: 怎么解决呢: 网上看了好多方法,但是本屌丝表示看不懂啊,没理解人家的博客的博大精深,好吧我们回到正题!! 先切换到root用户下安装这个东西 yum install python-a ...
洛谷P1414 又是毕业季II
题目背景 “叮铃铃铃”,随着高考最后一科结考铃声的敲响,三年青春时光顿时凝固于此刻.毕业的欣喜怎敌那离别的不舍,憧憬着未来仍毋忘逝去的歌.1000多个日夜的欢笑和泪水,全凝聚在毕业晚会上,相信,这一定 ...
nginx经过多层代理后获取真实来源ip
nginx取 $remote_addr 当做真实ip,而事实上,$http_X_Forwarded_For 才是用户真实ip,$remote_addr只是代理上一层的地址解决方案: 在 http 模 ...
volatile解析
转载:http://www.importnew.com/17394.html 一.volatile简介: 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatil ...
使用matplotlib 制图（柱状图、箱型图）
柱状图: import pandas as pd import matplotlib.pyplot as plt data = pd.read_csv('D:\\myfiles\\study\\pyt ...
win10 ubuntu双系统安装后无法引导进入ubuntu
之前按照先装windows后装ubuntu的方式装的系统,都可以引导到ubuntu,无论是将ubuntu挂在到/boot在windows用easy BCD建立ubuntu引导,还是将ubuntu挂在到 ...
c语言使用librdkafka库实现kafka的生产和消费实例(转)
关于librdkafka库的介绍,可以参考kafka的c/c++高性能客户端librdkafka简介,本文使用librdkafka库来进行kafka的简单的生产.消费一.producer librd ...
How to read very large text files fast
Question Does anyone know the fastest way to read large text files (10Mb) into a string.Readln is ju ...
PHP与apache配置
在apache 的安装路径中找到 \conf\httpd.conf文件在 LoadModule最后面添加如下代码: PHPIniDir "D:\PHP"LoadModule ph ...

php下的原生ajax请求

php下的原生ajax请求的更多相关文章

随机推荐

热门专题