AJAX 基础篇_请求的表单数据放在哪里了-优快云博客

本文链接：https://blog.youkuaiyun.com/believealone/article/details/110872791

本文详细讲解了AJAX的核心原理，包括如何创建XMLHttpRequest对象、设置请求方式、监听网络状态、处理GET和POST请求，以及jQuery封装的简化用法。特别关注了异步特性、数据传递和跨域问题。

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

AJAX基础

action属性: 发起请求时的服务器地址

method属性: 发起网络请求的方式(GET/POST)

表单控件的name属性: 当提交数据时, 键值对的key值, 会与控件的value值拼接成键值对(key=value)传递到服务器

<form action="http://127.0.0.1/AJAX01/server.php" method="get">
    <input type="text" placeholder="请输入用户名" name="username"/>
    <input type="text" placeholder="请输入密码" name="password"/>
    <input type="submit" value="登录"/>
</form>

前端的网络请求:

客户端向服务器发起请求(request)

服务器接收到请求之后会对本次请求做分析, 了解请求的意图(获取资源? 文件? 数据…), 分析出之后服务器进行对应的操作, 最后对本次请求作出相应(response), 返回给前端所需要的东西.

注 : 前端的哪些操作或者哪些代码会发起网络请求
1. 有些标签, 比如具有src或者href属性, 或者url样式的标签, 都可以发起网络请求只能是get
2. form表单 get/post
3. 浏览器的地址栏写网址, 回车 get
4. ajax发起网络请求 get/post
异步和同步

异步:

在发起网络请求时, 系统不需要等待网络请求返回的结果, 可以继续执行后面的代码, 当请求结果来到时, 通过回调函数触发告知开发者

同步：

在发起网络请求时, 系统在没有得到网络请求结果之前, 后面的代码不执行, 直到请求的结果拿到后才继续执行后面的代码
ajax和form表单发起网络请求
1. form表单发起网络请求, 会刷新页面, 页面会跳转; ajax发起网络请求时, 页面不跳转, 不刷新整个页面, 如果有需要, 可以只刷新局部页面
2. form表单因为是html标签, 所以没有同源策略, 不需要考虑是否跨域; ajax因为是Js, 所以需要考虑是否同源, 如果不同源, 无法请求数据
3. form发起网络请求时, 如果需要传递数据, 数据是自动进行拼接的; ajax需要我们手动配置
GET请求和POST请求

注：不能字面意义上理解get和post请求, get请求既可以向服务器获取数据, 也可以向服务器传递数据; post既可以向服务器传递数据, 也可以向服务器获取数据

区别：
1. GET提交的数据会拼接在网址的后面, 以?开头, 键值对之间用&连接, 是可见的; post请求会把请求的数据存放在请求体里, 不拼接在url网址的后面, 不可见.
2. GET请求提交数据的大小有要求, 最多只能有1024字节, 而POST没有大小限制
3. GET方式提交数据, 会带来安全性问题, 因为是可见的; POST不可见相对来说较安全

AJAX 网络请求

Asynchronous JavaScript And XML 异步javascript和xml

注：不是一门新的语言, 还是JS

作用：异步发起网络请求, 局部刷新页面

操作：

创建网络请求对象, XMLHttpRequest对象, 该对象是ajax的核心

注：ie浏览器发起网络请求通过ActiveXObject对象

function getReq() {
    if (window.XMLHttpRequest) {
        // 不是ie
        var request = new XMLHttpRequest();
    }else {
        // ie
        var request = ActiveXObject("Microsoft.XMLHTTP");
    }

监听网络请求, 处理请求成功时的状态

在一次网络请求的过程中, 网络请求的状态(readystate)是不断改变的, 有以下几种状态, 我们通过readystate的值进行判断, 该值是一个number类型

1: 请求建立连接

2: 请求已发送, 正在处理

3: 请求已处理, 并已得到部分数据

4: 请求已完成, 并已得到所有数据

网络请求成功和失败实际上服务器都会给我们返回数据, readystate的值都是4, 所以我们在readystate==4的前提下保证本次请求是成功的

通过http的状态码判断本次请求的状态

1xx: 收到请求, 正在处理

2xx: 成功类型, 并已经处理

3xx: 重定向类型, 请求发生变化

4xx: 客户端错误

5xx: 服务端错误

注：不要把请求已完成, 并已得到所有数据与成功获取到后台返回的数据划等号
```
request.onreadystatechange = function(){
// 该事件会在网络请求的状态发生改变时触发
    if (this.readyState == 4) {
 // 请求已完成, 并已得到所有数据
        if(this.status >= 200 && this.status < 300) {
 // 本次请求完毕, 且本次请求是成功的, 就可以获取本次请求的数据, 数据存储在网络请求对象的responseText属性里
            console.log(this.responseText);
            console.log(JSON.parse(this.responseText));
        }
    }
}
```

设置请求的方式和请求地址和参数

open(请求方式, 请求地址, 是否异步请求, 用户名, 密码);

request.open("GET","http://127.0.0.1/AJAX01/server.php？name="+i1.value+"&num="+i2.value, true);
//request.open("GET","http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html", true);

发起请求
```
request.send();
```

例：


<button onclick="postReq()">post请求</button>
<script type="text/javascript">
function postReq(){
    //1. 创建网络请求对象
    if (window.XMLHttpRequest) {
        // 不是ie
        var request = new XMLHttpRequest();
    }else {
        // ie
        var request = ActiveXObject("Microsoft.XMLHTTP");
    }
    request.withCredentials = true;
    //2. 设置监听
    request.onreadystatechange = function(){
        if (this.readyState == 4) {
            if(this.status >= 200 && this.status < 300) {
                console.log(this.responseText);
            }
        }
    }
    //3. 设置请求方式和请求地址
    //
    request.open("POST", "server.php", true);

    //4. 设置请求头 
    /*
	* 因为get请求的时候, 参数会直接拼接到网址的后面, 所以系统明确的知参数的格式, 而post请求把数据存放在请求体里, 这个时候需要告诉服务器数据的格式
	* application/x-www-form-urlencoded表示数据的格式为键值对的格式
	*/
    request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    //5. 发起网络请求并添加参数
    request.send("name="+i1.value+"&num="+i2.value);
}
</script>

ajax的jQuery写法

原生的ajax, 通过XMLHTTPRequest对象发起网络请求需要5个步骤
1. 创建网络请求对象
2. 设置网络状态监听
3. 设置请求方式和请求地址并传参
4. 设置请求头
5. 发起请求

JQ里也有ajax请求, 是对原生ajax的封装, 语法上更统一和简便

语法：

/*
* $.ajax(配置对象);
* url: 发起请求的地址
* type: 请求的方式(GET/POST)
* data: 需要传递的数据, 是对象格式
* dataType: 预期的服务器响应的数据类型
* success: 请求成功的回调函数
* error: 请求失败的回调函数
* jsonp: 跨域时使用, 跨域键值对参数的key
* jsonpCallback: 跨域时使用, 跨域键值对参数的value(函数名)
* contentType: 数据发送到服务器时的格式   默认值application/x-www-form-urlencoded
* timeout: 设置的超时时间, 单位:毫秒
* async: 布尔值, 是否异步, 默认值true
*/

GET请求

写法1，无参

function ajaxGet() {
$.ajax({
    type:"get",
    url:"http://127.0.0.1/AJAX02/serve.php",
    success:function(info){
        console.log(JSON.parse(info));
    }
});

写法2 有参

function ajaxGet() {
$.ajax({
    type:"get",
    url:"http://127.0.0.1/AJAX02/serve.php?name=" + $("#i1").val() + "&num=" + $("#i2").val(),
    async:true,
    success:function(info){
        console.log(JSON.parse(info));
    }
});

写法3 有参

function ajaxGet() {
$.ajax({
    type:"get",
    url:"http://127.0.0.1/AJAX02/serve.php",
    data:{
        name:$("#i1").val(), 
        num:$("#i2").val()
    },
    async:true,
    success: function(info) {
        console.log(info);
    },
    error: function(xhr, error, exception) {
        /*
						 * xhr: 网络请求对象
						 * error: 错误信息
						 * exception: 捕获的异常
						 */
        console.log(xhr, error, exception);
    },
    timeout:5000
});
}

POST请求

写法1

function ajaxPost() {
$.ajax({
    type:"post",
    url:"serve.php",
    async:true,
    success:function(datas){
        console.log(JSON.parse(datas));
    }
});

写法2 传参

function ajaxPost() {
$.ajax({
    type:"post",
    url:"serve.php",
    data:{
        name:$("#i1").val(),
        num:$("#i2").val()
    },
    async:true,
    //dataType:"json",
    /*
	 * dataType字段: 预期的服务端返回的数据类型, 如果加上该字段, jq会自动帮我们对数据做解析
	 * 注意: 如果服务端返回的不是json数据格式, 不建议添加该字段
	 */
    contentType:"application/x-www-form-urlencoded",
    success:function(info){
 	//console.log(JSON.parse(info));
        console.log(info);
    }
});

JSONP请求

写法1

function ajaxJsonP() {
    $.ajax({
        type:"get",
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
        data:{
            wd:"华为"
        },
        async:true,
        jsonp:"cb",
        jsonpCallback:"getData",
        // 表示本次请求是一个跨域的get请求, 而不是一个普通的get请求
        dataType:"jsonp"
    });
}

写法2 可以用success字段代替回调函数

function ajaxJsonP() {
    $.ajax({
        type:"get",
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
        data:{
            wd:"小米"
        },
        async:true,
        jsonp:"cb",
        success:function(news){
            console.log(news);
        },
        dataType:"jsonp"
    });
}