Ajax

Ajax不是某种编程语言
是一种在无需重新加载整个网页的的情况之下能够更新部分网页的技术。

  • 同步

  • 异步
    XMLHttpRequest对象可以应用与后台和服务器进行数据交换。

概念介绍
1、运用HTML和CSS来是实现页面,表达信息
2、运用XMLHttp和Request和web服务器进行数据的异步交换
3、运用Javascript操作DOM,实现动态局部刷新。

var request=new XMLHttpRequest(); //new一个XML对象

if(window.XMLHttpRequest){
   request=new XMLHttpRequest(); //IE7+,firfox,Chrome,Opera
}else{
   request=new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5
}

HTTP请求
http是计算机通过网络进行通信的规则
HTTP是一种无状态协议(没有记忆)
概念介绍-HTTP请求
1、建立TCP链接
2、Web浏览器想Web服务器发送请求命令
3、Web浏览器发送请求头信息
4、Web服务器应答
5、Web服务器发送应答头信息
6、Web服务器想浏览器发送数据
7、Web服务器关闭TCP连接

一个HTTP请求一般有四部分组成
1.HTTP请求的方法或动作,比如是GET还是POST请求
2.正在请求的URL,总得知道请求的地址是什么吧
3、请求头,包含一些客户端环境信息,身份验证信息等
4、请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等。

GET:一般用于信息获取
使用URL传递参数
对所发送信息的数量也有限制,一般在2000个字符。
(所有的变量名和值都显示在URL中)
幂等:一个GET请求执行一次和执行10000次他的效果是相同的。例如:在数据库中查询某个员工的数据一次和一万次对他都不影响。
POST:一般用于修改服务器上的资源
对所发送的信息无限制

一个HTTP响应一般由三部分组成
1、一个数字和文字组成的状态码,用来显示请求是成功还是失败
2、响应头,响应头也和请求头一样包含许多有用的信息,例如服务器类型、日期时间、内容类型和长度等
3、响应体,也就是响应正文。

enter description here

XMLHttpRequest发送请求
XHR对象的方法
open(method,url,async) 发送请求方法、请求地址、同步还是异步(默认是true)
send(string)
使用get请求时,参数可以不填写或者填写none
使用post请求时,就一定要填写参数。

几个例子:
```
request.open("GET","get.php",true);
request.send();

request.open("POST","post.php",true);
request.send();

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置HTTP请求的头信息,这是一个post信息,请求的内容是由url的方式发送的,一定要写在opensend中间
request.send("name=王二狗&sex=男");


```

XMLHttpRequest取得响应
  • responseText:获得字符串形式的响应数据

  • responseXML:获得XML形式的响应数据

  • status和statusText:以数字和文本形式返回HTTP状态码

  • getAllResponseHeader():获取所有的响应报头

  • getResponseHeader():查询响应中的某个字段的值

  • readyState属性
    0:请求为初始化,open还没有调用
    1:服务器链接已经建立,open已经调用了
    2:请求已经接收,也就是接收到头信息了
    3: 请求处理中,也就是接收到响应的主体了
    4:请求已经完成,且响应已经就绪,也就是响应完成了

var request=new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange = function(){
    if(request.readyState==4&&request.status==200){
       //做一些事情 request.responseText
    }
}

例子简介
1、查询员工信息
2、新建员工信息

  • 纯html页面,用来实现员工查询和创建的页面

  • PHP页面,用来查询员工和新建员工的后台接口

    • 运行PHP

    • XAMMP(XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建 XAMPP 软件站集成软件包。)

    • 在Dreamweaver中配置web服务器用于本地测试

原文地址:https://www.cnblogs.com/qqqiangqiang/p/5028641.html