浏览器中为我们提供了一个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请求的更多相关文章

  1. Servlet处理原生Ajax请求

    萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...

  2. 原生AJAX请求教程

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  3. 原生 ajax 请求

    ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...

  4. IE9下JQuery发送ajax请求失效

    最近在做项目的时候,测试PC端网页,在IE9下会失效,不能正常的发送POST请求,经过仔细的排查,发现是IE9下JQuery发送ajax存在跨域问题. 目前有两种解决方案:   解决方案一: 设置浏览 ...

  5. 前后端数据交互(二)——原生 ajax 请求详解

    一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...

  6. js原生ajax请求get post笔记

    开拓新领域,贵在记录.下面记录了使用ajax请求的get.post示例代码 //ajax get 请求获取数据支持同步异步 var ajaxGet = function (reqUrl, params ...

  7. .net MVC下跨域Ajax请求(CORS)

    二.CROS (Cross-origin Resource Sharing) CROS相当于一种协议,由浏览器.服务端共同完成安全验证,进行安全的跨域资源共享.对于开发人员来说就跟在本站AJAX请求一 ...

  8. JavaScript原生Ajax请求纯文本数据

    源代码 ajax1.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  9. 原生ajax请求的五个步骤

    //第一步,创建XMLHttpRequest对象 var xmlHttp = new XMLHttpRequest(); function CommentAll() { //第二步,注册回调函数 xm ...

随机推荐

  1. Codeforces Round #506 D. Concatenated Multiples题解

    一.传送门 http://codeforces.com/contest/1029/problem/D 二.题意 给你$N$个数字$a_1,a_2,\cdots,a_n$,一个$K$,求所有$i \ne ...

  2. div+Css绝对定位(absolute)和相对定位(relative)的总结

    1.没有外Div的情况下 设置绝对定位(absolute)和相对定位(relative)是没有区别的 2.相对定位占位置 而绝对定位不占位置 会漂浮在别的Div之上 3.若父Div没有设置定位,子Di ...

  3. javascript的事件流

    事件流包括三个阶段: 1.事件捕获阶段 2.处于目标阶段 3.事件冒泡阶段 1.事件捕获阶段 现在页面中有一个按钮. 如果单击这个按钮的话,在事件捕获过程中,document会首先接收到click事件 ...

  4. Web 项目遇到的乱码问题

    问题代码: jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  5. nodejs——压缩文件_archiver

    工作需要,由于html无法访问并下载带有中文的路径,例子:“127.0.0.1::8088/files/第一张图片.jpg”,所以想到了先将原图片压缩并命名为不带中文的文件名,下载后用户自行解压缩的方 ...

  6. node实现缓存

    内容: 1.缓存基本原理 2.node实现缓存 1.缓存基本原理 第一重要.缓存策略: cache-control:用于控制缓存,常见的取值有private.no-cache.max-age.must ...

  7. Python生态圈

    WEB开发——最火的Python web框架Django, 支持异步高并发的Tornado框架,短小精悍的flask,bottle, Django官方的标语把Django定义为the framewor ...

  8. swagger配置

    1.pom.xml <!--swagger2--> <dependency> <groupId>io.springfox</groupId> <a ...

  9. UI5-文档-2-开发环境

    这一部分将指导您安装.配置和设置SAPUI5开发环境的最常见和推荐用例. 请注意:您可以在不同的平台上使用SAPUI5.各自平台的许可和维护条件也适用于SAPUI5.例如,如果在SAP云平台上使用SA ...

  10. Egret 工具推荐

    Egret 工具推荐--打造最好的开发环境--IDE篇http://bbs.egret.com/forum.php?mod=viewthread&tid=13581&fromuid=1 ...