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

随机推荐

Java中的volatile关键字为什么不是不具有原子性
Java中long赋值不是原子操作,因为先写32位,再写后32位,分两步操作,而AtomicLong赋值是原子操作,为什么?为什么volatile能替代简单的锁,却不能保证原子性?这里面涉及volat ...
sklearn中的metrics模块中的Classification metrics
metrics是sklearn用来做模型评估的重要模块,提供了各种评估度量,现在自己整理如下: 一.通用的用法:Common cases: predefined values 1.1 sklearn官 ...
搜索引擎solr系列---solr分词配置
分词我理解的是,输入的一句话,按照它自己定义的规则分为常用词语. 首先,Solr有自己基本的类型,string.int.date.long等等. 对于string类型,比如在你的core/conf ...
pomelo RPC调用时新增字段缺失
接触pomelo开发一个月,正式开始参与项目开发有10天,遇到很多细节的坑,今天讲讲标题:后端服务器节点之间的rpc调用过程中,返回的数据中新增字段缺失问题. 先讲结果:原因是该rpc调用已经采用了p ...
png，jpg，gif这些图片格式解释一下，分别什么时候用，webp呢
gif图形交换格式,索引颜色格式,颜色少的情况下,产生的文件极小,支持背景透明,动画,图形渐进,无损压缩(适合线条,图标等),缺点只有256种颜色 jpg支持上百万种颜色,有损压缩,压缩比可达180: ...
python函数入门
知识内容: 1.函数的作用 2.函数的定义与调用 3.函数的返回值 4.函数的参数 5.局部变量与全局变量 6.作用域一.函数的作用 1.复用代码将可能重复执行的代码封装成函数,并在需要执行的地方 ...
c# 制作自定义控件并生成dll文件旷展到其他项目使用
1.新建项目,同时添加一个类库,然后在类库里面定义自己的控件:完毕生成项目,然后在类库的bin目录下就自动生成了这个自定义控件的dll文件. 2.在需要使用这个自定义控件的项目里,直接ctrl+c,c ...
c++官方文档-模版函数和重载
#include<stdio.h> #include<iostream> #include<queue> #include<map> #include& ...
扯皮的cplex-感觉时间不对
import ilog.cplex.CpxMult; import ilog.cplex.CpxNumExpr; import ilog.cplex.IloCplex; import ilog.con ...
Java的Guava
主要是看代码看到了Table这个类,竟然有两个键! http://www.cnblogs.com/peida/p/3183505.html

php下的原生ajax请求

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

随机推荐

热门专题