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

随机推荐

Sublime Text 2 - 性感无比的代码编辑器！程序员必备神器！
Sublime Text 2 - 性感无比的代码编辑器!程序员必备神器! http://www.iplaysoft.com/sublimetext.html 代码编辑器或者文本编辑器,对于程序员来说, ...
tornado系列文章
http://www.nowamagic.net/academy/detail/13321030
【POJ】2480 Longge's problem（欧拉函数）
题目传送门:QWQ 分析题意就是求∑gcd(i, N) 1<=i <=N.. 显然$ gcd(i,n) = x $时,必然$x|n$. 所以我们枚举一下n的约数,对于每个约数x,显然$ ...
Spark分析之Master
override def preStart() { logInfo("Starting Spark master at " + masterUrl) webUi.bind() // ...
小朋友学C++（1）
Hello World! 在学C++之前,最好先学习一下C语言让我们先运行一段简单的代码,编译器可以使用在线C++编译器或 Xcode(苹果系统) 或Dev C++(Windows系统). #i ...
solr联合多个字段进行检索(multivalued和copyfield的使用)
在实际工作中不仅仅对索引中的单个字段进行搜索.需要进行综合查询. 比如book表中有id,name(标题),price,summary(摘要),content(内容),我们要找一本书的时候,查询关键字 ...
Tomcat 支持的Java 版本和兼容性总结
https://tomcat.apache.org/whichversion.html 最新最全的Tomcat 支持的Java版本对照,即兼容性一览表: Servlet Spec JSP Spec ...
linux开发模式
linux已被使用vim[文本编辑]+gcc[编译]+[gdb代码调试]开发模式简单设置下开发环境,像设定vim的语法高亮,编辑c时代码自动缩进,tab缩进字符,显示行号等编辑vinrc一般vin ...
HTML5 位运算符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
leetcode401
public class Solution { /// <summary> /// 将二进制字符串转为十进制数字 /// </summary> /// <param na ...

php下的原生ajax请求

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

随机推荐

热门专题