php下的原生ajax请求

最新推荐文章于 2021-04-04 08:37:40 发布
最新推荐文章于 2021-04-04 08:37:40 发布
阅读量1.3k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： PHP 文章标签： ajax php javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/78042056
本文介绍AJAX技术的基础知识，包括如何使用XMLHttpRequest对象发起GET和POST请求，处理JSON及XML响应，以及同步与异步的区别。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

意味着我们的浏览器不提交，通过JS就可以请求服务器。
 
ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。
 
1、创建XHR对象
1
var xhr = new XMLHttpRequest(); //暂不考虑兼容
2、XHR的对象属性和方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
方法：
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请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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如下：
1
2
3
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!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如下：
1
2
3
4
<?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格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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如下：
1
2
3
4
5
6
7
<?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对象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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如下：
1
2
3
4
5
6
7
8
9
10
11
<?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，来查看请求的效果。
 
同步请求：
发送请求->等待结果->操作完成->继续后面代码。我们必须等待结果处理完毕后才能继续后面的代码，严格按照步骤一步一步执行。
 
异步请求：
发送请求->继续后面代码->响应结果接收完毕->操作结果。异步请求在发送请求之后没有等待结果的返回而是继续执行后面的代码，也就是说在结果返回之前用户可以操作其他东西。
【AJAX 教程】JS 原生 AJAX 请求
我的博客
05-15 1284
JS 原生 AJAX 请求 目录 目录 AJAX 简介 一、JS 原生 AJAX 请求 实现 AJAX 的基本步骤 XMLHttpRequest 对象 XMLHttpRequest 对象方法 1、创建 XMLHttpRequest 对象 2、设置响应 HTTP 请求状态变化的函数 onreadystatechange 事件 3、向服务器发送请求 GET 请求 POST 请求 Content-type常见类型： 4、服务器 响应 完整实例 总结 AJAX 简介
PHP处理Ajax请求与Ajax跨域
lmjy102的博客
04-11 422
原文地址: http://www.helloweba.com/view-blog-408.html 前端页面发送Ajax到服务端，服务端可以判断请求是否是Ajax请求，另外，对于跨域的Ajax请求，我们知道有JSONP方法，那服务器PHP该如何处理这些JSONP请求呢，以及如何处理不是jsonp请求的ajax跨域呢？本文将给大家详解这些困惑。 查看演示 下载源码
php原生的异步请求,原生javascript的ajax请求及后台PHP响应操作示例
weixin_42358791的博客
03-10 273
本文实例讲述了原生javascript的ajax请求及后台PHP响应操作。分享给大家供大家参考，具体如下：Document学号:密码:ajax的一般步骤1、创建对象let xhr = new XMLHttpRequest();2、设置请求参数xhr.open(请求方式,请求地址，是否异步);3、设置回调函数xhr.onreadystatechange = function () {// 5、接收响...
php中ajax请求
swimming_in_IT_的博客
11-09 2247
php中ajax请求的时候，网上一般都是如下这个样子： function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest)
php写ajax请求,php实现ajax请求的方法
weixin_39517400的博客
03-23 520
php实现ajax请求的方法Ajax页面：第一，了解底层逻辑，正是平常的1个提交在无刷新的条件下发出请求后完成回应，之后去针对你需要的条件来做动作。function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHt...
php下的原生ajax请求用法实例分析
10-15
以上就是PHP环境下原生AJAX请求的基本用法。了解这些基础概念后，你可以根据实际需求构建更复杂的交互逻辑，如处理错误、使用JSON格式交换数据、以及支持跨域请求等。原生AJAX虽然不如现代前端库那么方便，但它帮助...
Javascript原生ajax请求代码实例
10-15
这里我们将深入探讨如何使用原生JavaScript实现一个简单的Ajax请求。 首先，我们需要创建一个名为`Ajax`的类，这个类将包含处理Ajax请求的所有必要方法和属性。在提供的代码实例中，`Ajax`类包含了以下关键组成部分...
原生JS实现ajax与ajax的跨域请求实例
11-27
以下是如何使用原生JavaScript实现一个简单的AJAX请求的步骤： 1. **创建XMLHttpRequest对象**：在JavaScript中，我们首先需要创建一个XMLHttpRequest对象，它是AJAX的核心，用于与服务器进行异步通信。 ```...
PHP实现AJAX请求
zbwroom的博客
08-21 893
<?php require "util/dbUtil.php"; //定义一个最终用于返回的数组//该数组为关联数组 $resultArr = array(); $sql = "select * from dept"; $result = mysqli_query($conn,$sql); if($result->num_rows>0){ //定义一个用于存放数据的数
PHP和ajax请求_PHP ajax请求
weixin_42394054的博客
03-09 419
这里讲的是原生的ajax数据请求，也是比较基础的，适合新手去看一.效果图1-11-2HTML：实时更新body {background:url(5.jpg)no-repeat;background-size:cover;font-family:'Open Sans',sans-serif;font-size:100%;}function showHint(str){if (str.length==...
原生php怎么使用ajax,原生的ajax的使用
weixin_36173940的博客
04-04 274
原生的ajax的使用:创建XMLHttpRequest对象的创建为了每次写Ajax的时候都节省一点时间， 可以把对象检测的内容打包成一个可复用的函数:functiongetHTTPObject(){varxhr=false;if(window.XMLHttpRequest){xhr=newXMLHttpRequest();}elseif(window.ActiveXObject){...
php发起ajax请求,php的ajax请求实现
weixin_42342032的博客
03-10 1028
ajax其实是利用javascript向服务器请求数据，然后局部修改页面。具体步骤类似浏览器请求需要分为三步创建请求对象(类似打开浏览器)创建链接信息(类似浏览器输入网址)发送请求(类似浏览器回车发送)下面是一个简单ajax的例子发送请求function request(){//1. 创建ajax对象var xlr =new XMLHttpRequest();//2.输入链接信息xlr.open(...
ajax请求中contentType与dataType区别
weixin_30886233的博客
02-06 203
contentType: 告诉服务器，我要发什么类型的数据，默认值:"application/x-www-form-urlencoded"。 dataType：告诉服务器，我要想什么类型的数据。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这...
原生php ajax post_php下的原生ajax请求用法实例分析
weixin_30856775的博客
03-09 238
本文实例讲述了php下的原生ajax请求用法。分享给大家供大家参考，具体如下：浏览器中为我们提供了一个JS对象XMLHttpRequet，它可以帮助我们发送HTTP请求，并接受服务端的响应。意味着我们的浏览器不提交，通过JS就可以请求服务器。ajax(Asynchronous Javascript And XML)其实就是通过XHR对象，执行HTTP请求。1、创建XHR对象var xhr = ne...
php 判断ajax 请求,php判断ajax请求
weixin_30889555的博客
03-22 226
Javascript中大多数的框架如 jquery(jquery ui、jquery easyui)、Mootools 等,在发出 Ajax 请求时,都会发送额外的 HTTP_X_REQUESTED_WITH 头部信息。有时我们需要判断是不是ajax请求来决定模块输出还是json格式输出.PHP判断ajax请求的原理:在发送ajax请求的时候，我们可以通过XMLHttpRequest这个对象，创建...
ajax 向php发送请求
Bright的专栏
08-23 5132
First Name: <input type="text" id="txt1" onkeyup="showHint(this.value)"> Suggestions: clienthint.js var xmlHttp function showHint(str) { if (str.length==0) { document.getElemen
php ajax 请求原理
u011847928的专栏
09-16 755
var xmlHttpRequest; function getXmlHttpObject(){ //不同的浏览器获取xmlhttprequest对象的方法不一样 if(window.ActiveXObject){ //说明是ie浏览器 xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); }else{ //说明不是ie xmlHttpRe
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值