ajax post请求400_Ajax 核心知识之与后台有个约会

r囧r小猫 2023-01-01 14:55 112阅读 0赞

配合上节内容，今天给大家讲解Ajax一些核心知识。

**1：XMLHttpRequest 对象创建；**

所有现代浏览器均支持 XMLHttpRequest 对象；

但是(IE5 和 IE6 使用的是ActiveXObject)

**XMLHttpRequest**【 主要作用是在后台，与服务器进行数据的交换】这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新；ajax主要传输数据，靠的就是**XMLHttpRequest，**怎么去创建它，如下；

代码举例讲解：

新建一个项目；在新建一个ajax.JSP,先在前台写一个按钮和输入框：

![5671d64707ad35f4b922c67517a6e9f6.png][]

Servers把项目add进去，建议大家用火狐浏览器，比较适合断点调试，运行如下所示一个简单的展示；

![43ef9e4ab465d1efa4163f77b3b9f52e.png][]

声明一个xmlHttp，主流浏览器都支持XMLHttpRequest，直接new就行了，但是还是有很多人用i6i5，不信你调查一番，所以一定要把这个考虑进去，那么就要new的就是ActiveXObject("Microsoft.XMLHTTP")。如下图；

![ffcce71a2132665ec0d6f562860277ab.png][]

以上就是简单的一个创建。下面我们看ajax，如何与后台进行交互。这里我暂时先用Servlet给大家举例。

**2：【XMLHttpRequest 对象请求后台】；这里面就是用到了open()和send()方法；**

**2-1：open(method,url,async)**

【规定请求的类型、URL 以及是否进行异步处理请求】。

\{ **method**：请求的类型；GET 或 POST\}

\{ **url**：文件在服务器上的位置\}

\{ **async**：true(异步)或 false(同步)\}:

但大多数情况下使用异步请求。

![dd2dc9e26b79437c07bb8c3ef9462690.png][]

**2-2：send(string)**

【向服务器，发送请求】。

**string**：仅用于 POST 请求

GET 还是 POST？

get是直接跟在url后面的，post是数据包封装里面进去的。

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件(更新数据库，或位于服务器上的文件)

将大量数据，发送至服务器(POST 没有数据量限制)；

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

setRequestHeader(header,value)

向请求添加 HTTP 头。

header: 规定头的名称

value: 规定头的值

xmlhttp.setRequestHeader("Content-type

[5671d64707ad35f4b922c67517a6e9f6.png]: /images/20221120/706fab3ccdc149a8964b9851aaa70ae0.png
[43ef9e4ab465d1efa4163f77b3b9f52e.png]: /images/20221120/d37ddee43160408dafc334eb0504f1b0.png
[ffcce71a2132665ec0d6f562860277ab.png]: /images/20221120/e906c75db4dc43179aebcb3b73b28d2f.png
[dd2dc9e26b79437c07bb8c3ef9462690.png]: /images/20221120/3fdeb9779db34bae974a20731bcc4a50.png