Web应用程序异步发送和检索数据（在后台）。 AJAX允许网站在不刷新页面的情况下将内容加载到屏幕上。 jQuery为AJAX功能提供了几种方法，从而使使用AJAX更加容易。在本章中，我们将学习如何将GraphQL与jQuery集成。

考虑使用客户端服务器体系结构的应用程序。我们可以构建一个前端网页，以从GraphQL服务器请求数据。该网页将使用jQuery对GraphQL服务器进行AJAX调用。

为了将GraphQL与JQuery集成在一起，让我们检查GraphiQL请求标头并了解请求参数。

启动hello-world应用程序（有关说明，请参阅第6章）。在GraphiQL窗口中输入graphql查询{greeting}。右键单击并检查或按Chrome上的（ctrl + shift + I）转到网络标签，如下所示-

从简单的hello-world示例中，我们可以了解所使用的http方法是POST 。现在，在浏览器中，向下滚动到标题部分以查看请求有效负载。

单击查看代码后，您将在chrome的请求有效负载部分中看到以下内容。

{"query":"{\n  greeting\n}","variables":null,"operationName":null}

还请注意应从客户端应用程序调用的请求URL http：// localhost：9000 / graphql 。

插图

让我们了解如何使用逐步过程将GraphQL与JQuery集成。

设置服务器

我们将学习使用以下步骤来设置服务器-

步骤1-下载并安装项目的必需依赖项

创建一个名为jquery-server-app的文件夹。从终端将目录更改为jquery-server-app。请按照“环境设置”一章中说明的步骤3到5进行操作。

第2步-创建架构

在项目文件夹jquery-server-app中添加schema.graphql文件，并添加以下代码-

type Query
{
   greeting: String
   sayHello(name:String!):String
}

该文件定义了两个查询greeting和sayHello 。 sayHello查询接受一个字符串参数并返回另一个字符串。 sayHello（）函数的参数不为null。

第3步-创建解析器

在项目文件夹中创建文件resolvers.js并添加以下代码-

const Query =
{
   greeting: () => 'Hello GraphQL  From TutorialsPoint !!' ,
   sayHello:(root,args,context,info) =>  `Hi ${args.name} GraphQL server says Hello to you!!`
}
module.exports = {Query}

在这里， greeting和sayHello是两个解析器。在sayHello解析器中，可以通过args访问传递给name参数的值。要访问模块外部的解析器功能，必须使用module.exports导出查询对象。

步骤4-运行应用程序

创建一个server.js文件。请参阅“环境设置”一章中的步骤8。在终端中执行命令npm start 。服务器将启动并在9000端口上运行。在这里，我们使用GraphiQL作为客户端来测试应用程序。

打开浏览器，然后输入URL http：// localhost：9000 / graphiql 。在编辑器中键入以下查询-

{
   greeting,
   sayHello(name:"Mohtashim")
}

来自服务器的响应如下所示-

{
   "data": {
      "greeting": "Hello GraphQL From TutorialsPoint !!",
      "sayHello": "Hi Mohtashim GraphQL server says Hello to you!!"
   }
}

设置客户端

由于我们已经设置了服务器，因此现在我们将学习如何设置客户端。

步骤1-在当前项目文件夹之外创建一个新文件夹jquery-client-app

首先，我们将在项目文件夹之外创建一个名为jquery-client-app的文件夹。

第2步-为jQuery集成创建HTML页面index.html

我们将在jquery中创建一个客户端应用程序并调用这两种方法。以下是index.html文件的代码。当单击按钮Greet和SayHello时， index.html页将请求发送到服务器。我们将使用$ .ajax（）函数发出异步请求。

      
   
   
   
      
Jquery Client 

      

      

         Greet
         
 

         
 
      
      
      
 
 

      


      

         Enter a name:
         SayHello
         
 
      
   

在浏览器中打开此文件，然后单击按钮以查看响应。输出将如下所示-